Dynamic Drive CSS Library- CSS Image Gallery

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

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

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 4 of 30 pages « First < 2 3 4 5 6 > Last »

Rosemary,
I think if you use the CSS as shown any content including text in the location of the enlarged image will be overlayed by the large image. If its not doing that add: z-index:50; to .thumbnail span
The z-index of 50 will keep it on top.

Posted by Terry on 07/20, 08:55 PM

Nice photo gallery. I like to see something like this made without Java script.

Posted by Hrvoje on 07/22, 11:53 PM

Is it possible to have the thumbnail in one container and have the image load in a seperate one. Main problem is the image will overload the current container so I want to be able to put it in a seperate container. Thanks.

Posted by Dan on 08/02, 02:24 PM

This is fantastic and works well, the only problem that I have is that in IE the large picture shows to the right of the thumbnails but in FF it shows centered over the top of the thumbnails - is there a fix forthis?

Posted by Laura on 08/02, 03:04 PM

could I hyperlink the thumbnails?

Posted by Jef on 08/06, 05:38 PM

I tried the codes, but instead of showing in 2 rows, it came out as a single line. Please help.

Posted by kem on 08/08, 12:38 PM

im making a div overlay for myspace, how would i encorporate this onto myspace. where wud i add the z-index? to make it go on top of everything else.

Posted by checento on 08/08, 05:31 PM

I have been pulling out my hair for three weeks trying to find a picture gallery that
1. was IE compatible
2. used mouseover action
3. displayed the full size picture at the same spot rather than in a relative position
4. included a picture caption

I found this site this morning and in three hours had it formatted,colored, and working beautifully for my site.
this is fantastic....thank you!!

Posted by dd on 08/09, 12:10 PM

I have posted sometime 3 wks ago, just got back so write how I was pleased :). Once in a while, you just stumble in to something so simple but totally blows you away. This css replaced a hundred lines or so of javascript I used for a dhtml floatie. Simple great..

Posted by jessie on 08/11, 11:49 AM

Excelent. Thanks.

Posted by Andrzej-Ludwik Wloszczynski on 08/12, 01:47 PM

Comment Pages 4 of 30 pages « First < 2 3 4 5 6 > Last »