Dynamic Drive CSS Library- CSS Image Gallery

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Advertise Here

CSS Library: Image CSS: Here

CSS Image Gallery

Author: Dynamic Drive

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

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

this is cool but is there a way to use separate cropped thumb images that pop up the full image?

Posted by kirk on 03/24, 03:01 PM

This code may not work on all sites. with filters and such. It would be very much easier to use and edit if it was less complicated.

Posted by Mouze on 03/27, 02:26 PM

When I use this code with thumbnail images laid out horizontally, the popup image appears BEHIND the thumbnails. How do I make it appear on top? :( I would appreciate your help.

Posted by Sunny on 03/29, 12:03 AM

This is great! Please can you tell me how to change the behavior from rollover mouse over to on click editing the css?
Thank you

Regards.

Posted by Veronica on 03/29, 04:49 PM

this is very awesome, I changed the code so that the image would align with the bottom of my thumbnail instead of the top and it works fine like this in firefox and mostly IE except for just one image. I've looked over my code a hundred times and the only thing that seems to make the hover not work is changing the alignment from (top:0;) to (bottom:0;) is there another way to do this so that it will work in IE? Thanks.

Posted by Brittney on 04/01, 09:21 PM

Genius! absolutely top notch. Thank you for sharing your work, I will use it for a travel page. Your work will reach thousands.

Thank you so much

Posted by Pedro on 04/04, 08:52 PM

I am just starting to teach myself and I was wondering where the #thumb in the href line came from. I don't see where that is being referenced, or is this a particular command I am unfamiliar with?

Nice code, I will use it. Thanks!

Posted by Neil Jensen on 04/07, 01:06 AM

Hi,how do i place the enlarged picture? i whould like to place the enlarge picture in a div or a table...where do i change the the style in the css or the page?

thanks alot

Posted by Rik on 04/12, 12:01 AM

Hi!
I tried to make this gallery on this page: http://www.irorszaginfo.com. Unfortunately it doesn't work properly. Because when the thumbnails are on the right side I can roll the page, if the thumbnails are on the left I can't roll. And the position of the big pictures are not the same in IE and in Firefox. Could anybody fix this problem?
Thx

Posted by wombat on 04/12, 01:15 PM

I really want to use this but is there a way to repostion the thumbnails to the bottom right in one line. Can't seem to get them to move. Thanks in advance

Posted by James on 04/13, 12:20 AM

Comment Pages 24 of 30 pages « First < 22 23 24 25 26 > Last »