Dynamic Drive CSS Library- CSS Image Gallery

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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

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 2 of 41 pages < 1 2 3 4 > Last »

Wonderful, wonderful, wolderful! In case you did not know...I learn a lot from Dynamic Drive. Thanks. This css is great and I will soon incorporate it into upcoming projects.

Posted by Nii Okunor on 06/04, 12:44 PM

How do you force the enlarged image to stay in one spot even if the browser window changes side. Looks great when maximized but not any other size. I'm a noob!

Posted by Dave on 06/05, 02:28 AM

Really excellent! I'm redoing my entire site because this is so cool and I love that viewers will not be able to right click and save my images. Super sweet.

Posted by Kate Pittman on 06/23, 06:00 PM

Do you know what could cause this to not work on Myspace? I previewed it on another page and it worked fine... I'm pretty sure the code is ok, and Myspace is supposed to allow CSS...

Posted by Crystal on 06/27, 08:37 AM

This is an excellent image viewer. Prior to finding this, I had almost finished my new redesigned webpage using the CSS hover concept and I it was working perfectly in 5 different browsers including IE 7 beta 2.
Then I thought Id better try it in IE 6 also since most people unfortunately still use it. Well it was utterly broken in IE 6 due to its hover and positioning bugs. So again I hunted for a solution and I am astonished to have found this CSS script that works in IE 6 !!

After adapting it to my webpage I did find one anomaly with IE 6. In the captions of the displayed images IE6 inexplicably interpreted every space as a line return, so there was a new line after every space in the caption. I found that adding white-space: nowrap; to the class .thumbnail span prevents IE6 from doing a newline with every space and so fixed that issue. My new webpage isnt ready yet, but when it is I will post it. The current page uses javascript rollovers only until I have my new CSS webpage ready.

Posted by Terry on 06/28, 03:06 AM

Very cool gallery
But, it works on FF1 & IE6 not IE7+
I can only see the text on IE7, NO images :(
Regards,
T.R.

Posted by T.R. on 06/30, 07:55 AM

TR: IE 7, although its the first good browser Microsoft ever made, wont be significantly used for a while. It will probably take a couple years at least for it to take the place of IE 6. If it works in all the currently used major browers, Im happy with it.

Posted by Terry on 06/30, 12:46 PM

Hi I just copied the code into my coffee cup editor tried it but the images did not enlarge. I"m not that clever with this kind of thing yet. just learning.

Am I doing something wrong? or not doing something?

Posted by Rod Dyson on 07/01, 08:28 AM

Me too.. very cool code but I do not know where to put height and width attributes in the css.

I inserted an image 100px 66px and then put the same normal sized image in same media folder but still not working..what am I missing ?

thanks

Posted by Lucas on 07/05, 05:14 PM

got it...had a directory problem fixed

Posted by Lucas on 07/06, 08:13 AM

Comment Pages 2 of 41 pages < 1 2 3 4 > Last »

Commenting is not available in this weblog entry.