Welcome to WebmasterWorld Guest from 54.226.246.160

Forum Moderators: not2easy

Message Too Old, No Replies

Help organizing thumbnail images

I need to organize these so they are all visible using hover feature

     

fitman

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!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month