Dynamic Drive CSS Library- CSS Image Gallery

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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 9 of 41 pages « First < 7 8 9 10 11 > Last »

too good!! luv it!

Posted by mouli on 11/28, 01:57 AM

Using this now for a photo gallery script!
Thnx for sharing this one!

Posted by Thinkbasic on 11/28, 04:29 AM

This is great, but does anyone know how to use this in a table setup? I wanted each of the thumbnails in a seperate cell, and when you rollover to appear in another cell (like the setup here). If anyone has any ideas I'd really appreciate it!
Thanks!

Posted by Steph on 11/28, 09:38 AM

It is really helpful...

Posted by mt8024 on 11/29, 03:23 AM

I tried this in Safari and FireFox, and both work, but both show a wider gap on the right edge of the picture than on the left. I tried tweaking the CSS but could not figure out a way to avoid the extra gap on the left. Any ideas how to correct it?

Posted by Peter N Lewis on 11/29, 08:35 PM

Well, firstly...
Fantastic Gallery.

Secondly.... I'm encountering major issues.
There appears to be strong limitations on the usage of the css, as in Browsers such as M-FF or NN7 on Windows OS you end up with huge "gap" below the content.

i.e.
you gallery has 10 images.
you display them one below the other.
things are fine.... unless the only thing below your main content section is a footer, in which case you end up with an almight gap after/below.
IE 6 doesn't show this.... (so obviously it's meant to occur :))

Has no one else found this... or if so, have they found a way around it as yet ?

still, fantastic code ;)

Posted by Autocratical on 12/06, 01:49 PM

This CSS Gallery is fantastic! I love it. It has an advantage over using software I have been using! SPEED, I no longer have to regenerate to add a single image, plus of course it is speedy, even on my slow Powermac 450.

So I want to thank you for helping me with improving my CSS.

I combined your .css file with Building horizontal menus, which I found at:-

http://css.find-info.ru/css/016/cssckbk-CHP-3-SECT-8.html

I had some problems with thumbnails and the main picture when the image was shot vertically, however I soon found out how to get around that, just change the height and width.

All my images are scaled down to 640x480, it would be nice to be able to say they cannot display bigger than 90%, for some reason most display fine in the main large image area, the odd one or two do not, so I had to limit their display size to 90% 576x432.

http://homepage.mac.com/stevenbutterworth/Sites/cars/Morges06/index.html

This is the main Gallery with 14 pages.

Other galleries where I have used the same techniques:-

http://homepage.mac.com/stevenbutterworth/Sites/cars/Iconic/index.html

http://homepage.mac.com/stevenbutterworth/Sites/other-galleries/pets/dogs/index.htm

lhttp://homepage.mac.com/stevenbutterworth/Sites/other-galleries/pets/cats/index.html

These are the only galleries so far modified .........

Posted by Steven Butterworth on 12/08, 01:45 PM

Tested this on Firefox, Camino, Safari (Mac), Internet Explorer (Windows).

Posted by Steven Butterworth on 12/08, 01:56 PM

Hi,
is there any possible way to put large image in centar of screen?

Thanks

Posted by Sascha on 12/09, 08:13 AM

No doubt, but you have to experiment with the CSS code.

Posted by Steven Butterworth on 12/09, 12:28 PM

Comment Pages 9 of 41 pages « First < 7 8 9 10 11 > Last »

Commenting is not available in this weblog entry.