Dynamic Drive CSS Library- CSS Image Gallery

CSS Library: Image CSS: Here

CSS Image Gallery

This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS's ":hover" pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it's possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn't support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.

Demo:

Simply beautiful.

So real, it's unreal. Or is it?

Sushi for dinner anyone?

Run wild with horses.
Dynamic Drive

Dynamic Drive
Zoka Coffee

Zoka Coffee

Note: Here the enlarged images are set to "overlay" any content that it may come in contact with. You can easily disable overlaying just by giving the gallery container (.gallerycontainer) a height set to that of the largest image's.

The CSS:

<style type="text/css">

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.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: lightyellow;
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;
}

</style>

The HTML:

<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> 

<a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a>

<br />

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a>

<br />

<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>

</div>

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (289)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 6 of 29 pages « First < 4 5 6 7 8 > Last »

Great code, thanks a lot.

Posted by Edgar on 09/18, 03:03 AM

i am just looking for this kind for job.. and more then this.... if there is loding type in span or if u have any idea... plz. tell me.....

by the way good job.. Excelent

Posted by somit shrestha on 09/19, 02:46 AM

I love this script but can't figure out how to make it work within the table of pics I have. How would I link it to each pic in my table?

<td width="131" height="110"><div align="center">images/36748.jpg</div></td>

Posted by Kelly R on 09/25, 12:44 AM

I really want to implement this but I’m having some trouble. I’m trying to display the thumbnails on a scrolling layer inside of a tab-content viewer (lots of pics here) and the enlarged images in a static display area. But it seems you can’t separate the thumbnail from the span in the html. But I’m thinking it might be possible in the CSS, any ideas?
(sorry if I posted twice, its 6:30am and I can't remember if I hit submit)

Posted by bustya on 09/27, 05:33 AM

Just letting you know that it doesn't function in IE7beta3 at the moment.

Posted by Naomi on 10/02, 02:10 PM

This is good one.. ThanX...

Posted by Immanual on 10/05, 03:40 AM

Works fine in IE 7.0.5700.6 RC

Posted by Adriana on 10/05, 04:36 AM

this is a fabulous one. i tried the button menus as well. I was stuck on these two things since quite long...I have them working,now. Thanks a lot..

Ruchika

Posted by ruchika on 10/13, 03:57 AM

I modified this script so I could display many pics without a really long page & slow load time. I displayed the thumbnails only inside of one iframe and using a setActive JS targeted the larger version (only) in another iframe… which makes the larger version stay put in a static display area; the only problem is it only works in IE because of the setActive… but I’m working on a fix for that using a user-defined setActive so FF users may view the page too.

Posted by bustya on 10/13, 07:58 AM

Is there any limitation about the size of the image?, I mean, the behaviour is affected. Thanks for the code.

Posted by rguerrae on 10/18, 05:00 PM

Comment Pages 6 of 29 pages « First < 4 5 6 7 8 > Last »