homepage Welcome to WebmasterWorld Guest from 54.167.11.16
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Help organizing thumbnail images
I need to organize these so they are all visible using hover feature
fitman




msg:4529652
 2:07 pm on Dec 19, 2012 (gmt 0)

Hi, I am very new to writing code and would please like the simplest solution for this. I am trying to organize my thumbnails so that when using the hover feature they are all visible. Currently only the first six thumbnail images are visible when hovering.

Here is the css:

body
{
font-size: 1.1em;
font-family: "Arial Black", Gadget, sans-serif;
background-color: #ff8c00;
line-height: 1.25em;
}
header
{
font-family: Arial, Helvetica, sans-serif;
clear: both;
margin-top: 0;
text-align: center;
color: white;
background-color: #006400;
padding: 1em;
}
#container
{
width: 95%;
margin: 0 auto;
border: 4px solid;
}
#gallerycontainer
{
position: relative;
}
.thumbnail img
{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover
{
background-color: transparent;
}

.thumbnail:hover img
{
border: 1px solid blue;
}

.thumbnail span
{
/*CSS for enlarged image*/
position: absolute;
background-color: yellow;
padding: 5px;
left: 1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img
{
/*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span
{
/*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}


Here is the html:

<!DOCTYPE html>
<html>
<head>
<script src="modernizr-2.js"></script>
<title>Image Gallery</title>
<link href = "image_gallerystyles.css" rel = "stylesheet" type = "text/css"/>

<style type="text/css">

</style>
</head>
<body>
<section id="container">
<header>
<p><img src="images/monarch_banner.jpg" alt="monarch" width="980" height="100" /></p>
Hover Over Image for Larger View
</header>
<p><a class="thumbnail" href="#thumb"><img src="monarch2.jpg" alt ="monarch2" width="100" height="80" border="0" /><span><img src="monarch2.jpg" alt ="monarch2" /><br />Simply beautiful.</span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch3.jpg" alt ="monarch3" width="100" height="70" border="0" /><span><img src="monarch3.jpg" alt ="monarch3" /><br />Eating Fruit</span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch4.jpg" alt ="monarch4" width="100" height="70" border="0" /><span><img src="monarch4.jpg" alt ="monarch4" /><br />Resting on Milkweed</span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch5.jpg" alt ="monarch5" width="100" height="70" border="0" /><span><img src="monarch5.jpg" alt ="monarch5" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch6.jpg" alt ="monarch6" width="100" height="70" border="0" /><span><img src="monarch6.jpg" alt ="monarch6" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch7.jpg" alt ="monarch7" width="100" height="70" border="0" /><span><img src="monarch7.jpg" alt ="monarch7" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch8.jpg" alt ="monarch8" width="100" height="70" border="0" /><span><img src="monarch8.jpg" alt ="monarch8" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch9.jpg" alt ="monarch9" width="100" height="70" border="0" /><span><img src="monarch9.jpg" alt ="monarch9" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch10.jpg" alt ="monarch10" width="100" height="70" border="0" /><span><img src="monarch10.jpg" alt ="monarch10" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch11.jpg" alt ="monarch11" width="100" height="70" border="0" /><span><img src="monarch11.jpg" alt ="monarch11" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch12.jpg" alt ="monarch12" width="100" height="70" border="0" /><span><img src="monarch12.jpg" alt ="monarch12" /><br />Babies</span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch13.jpg" alt ="monarch13" width="100" height="70" border="0" /><span><img src="monarch13.jpg" alt ="monarch13" /><br />Caterpillar</span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch14.jpg" alt ="monarch14" width="100" height="70" border="0" /><span><img src="monarch14.jpg" alt ="monarch14" /><br />Caterpillar</span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch15.jpg" alt ="monarch15" width="100" height="70" border="0" /><span><img src="monarch15.jpg" alt ="monarch15" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch16.jpg" alt ="monarch16" width="100" height="70" border="0" /><span><img src="monarch16.jpg" alt ="monarch16" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch17.jpg" alt ="monarch17" width="100" height="70" border="0" /><span><img src="monarch17.jpg" alt ="monarch17" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch18.jpg" alt ="monarch18" width="100" height="70" border="0" /><span><img src="monarch18.jpg" alt ="monarch18" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch19.jpg" alt ="monarch19" width="100" height="70" border="0" /><span><img src="monarch19.jpg" alt ="monarch19" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch20.jpg" alt ="monarch20" width="100" height="70" border="0" /><span><img src="monarch20.jpg" alt ="monarch20" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch21.jpg" alt ="monarch21" width="100" height="70" border="0" /><span><img src="monarch21.jpg" alt ="monarch21" /><br />Caterpillar</span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch22.jpg" alt ="monarch22" width="100" height="70" border="0" /><span><img src="monarch22.jpg" alt ="monarch22" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch23.jpg" alt ="monarch23" width="100" height="70" border="0" /><span><img src="monarch23.jpg" alt ="monarch23" /><br /></span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch24.jpg" alt ="monarch24" width="100" height="70" border="0" /><span><img src="monarch24.jpg" alt ="monarch24" /><br />Caterpillar</span></a></p>
<br />
<p><a class="thumbnail" href="#thumb"><img src="monarch25.jpg" alt ="monarch25" width="100" height="70" border="0" /><span><img src="monarch25.jpg" alt ="monarch25" /><br /></span></a></p>
</section>
</section>

</body>

</html>



Any help would be greatly appreciated! Please keep it simple.

Thanks!

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved