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 23 of 29 pages « First < 21 22 23 24 25 > Last »

This doesn't work on a myspace?
Is it not meant to ?

Posted by Christy on 01/31, 04:33 AM

Great bit of code. However when i change the screen resolution the images move. Is there any way to change the code so it dosent happen?

Posted by rich on 02/01, 03:55 AM

hi all, need a fix. I got the thumbnail to show but the mouse hovers over the image it does not work. What is displayed is the yellow, dash border, caption, and a small (2px by 5px) blue outline of the image. I played around with the css codes but no luck. The images I'm using is .gif and .jpg. Please, help.

Posted by Eric on 02/10, 05:28 PM

I am having a problem with the images showing up like the example I am using the same code with my own images but, the images are all together.
help

Posted by Allen on 02/16, 01:12 AM

Great! It helps me alot

Posted by Naren on 02/22, 04:02 AM

I want to know how to use CSS with PHP
and I want to do Gallery with CSS plz guide me!!!!!

Posted by Neo on 02/23, 06:13 AM

Will this work if i try using this on visual web developer 2008? I'm just trying to find ways of building a web based image gallery. Any other tips beside this site?
Cheers

Posted by Al on 02/25, 10:36 AM

Thanks I love the examples

Posted by Fab on 02/29, 11:12 AM

This does not seem to be compatible with MS Vista....
Any plans for future modifications to handle this support?

Posted by Qman on 03/03, 08:17 AM

How do I integrate this script with the facebox type of transparent image border?? Please help me in laymen's terms (paste this here etc.).
Here's a facebox site: http://famspam.com/facebox

Thank you!

Posted by John Boyd on 03/06, 07:52 PM

Comment Pages 23 of 29 pages « First < 21 22 23 24 25 > Last »