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 (281)

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

the code is excellent, pure CSS. Thanks.. ;)

Posted by Fabio Langer on 04/16, 05:25 PM

Just have to say first Thanks this is great. Have a question though as I add images and have to use my scrollbar I lose the Bigger image because it still views top left corner. I am in school so learning any tips would be great.
Thanks again

Posted by Michelle on 04/19, 01:37 PM

Can anyone help?? When I use this code (the text to pic i.e. Dynamic Drive& Zoka Coffee), I cant seem to get the images to appear in the same place? I want them to be the same distance from the top of the page?

Can anyone help please?

Posted by brad on 04/22, 09:59 PM

Hi,
I like this script. I only have a small problem. When there are more pictures on the page and I need to scroll, the large image is hidden. Is there anyway that you can allow the large image to appear?

Thanks for any help

Posted by Gilles on 04/23, 09:05 AM

How can i get the large photos to be placed a little lower on the page? At the moment they are going over the top of my menu bar? I am only using the text sample, not the photo one

PLEASE HELP

Posted by brad on 04/23, 07:57 PM

how can i use that code for drupal ?

Posted by rujak on 05/02, 07:10 PM

really simple fast aproach! thanks!

Posted by tobto on 05/05, 11:18 AM

any idea how to keep the images on after mouse out.
i dont like the fact that they dissapear. not sure if this can be done with css alone.

Posted by james on 05/05, 08:52 PM

This CSS thumbnail gallery is neat. When going to thumbnail, I just want bigger image/text stay. - mouseout or something.

Please help. Thanks.

Posted by Michael on 05/13, 01:13 PM

Easy, simple and powerful!
Thanks.

Posted by John on 05/19, 01:04 AM

Comment Pages 25 of 29 pages « First < 23 24 25 26 27 > Last »