Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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+.


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:


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

Very nice. I am just trying things out and this is great.
Posted by Shea on 07/06, 02:04 PM
I'm a new css user. I understand the css code, and the html code, but I don't know how you put the two together. As in, the part that starts with "a class" goes through to "/span""/a", is that supposed to be put into each place where it says *css of enlarged image here* because there are 3 places, but one set of html for that photograph. This is probably the dumbest question you've ever recieved, but I can't learn if no one tells me (for all the gurus who proceed me on this page).
Posted by MaRanda Kiser on 07/06, 03:03 PM
The code is perfect and easy to use. I am trying to get the first image to be show in the gallerycontainer upon the page loading. Then change when the cursor hovers over another thumbnail. If anyone could help I'd be very appreciative.
Posted by Psyience on 07/07, 05:32 PM
I think I'm going to re-vamp some of my websites with this lovely css stuff
Posted by John on 07/15, 05:41 AM
great stuff
Posted by john on 07/15, 05:43 AM
My new website which uses a modified version of this CSS image gallery is located at Im using it as my thumbnail image viewer to preview images before enlarging them. Its quite nice if I say so myself and thanks to Dynamic Drive for the CSS image gallery script which I used in a modified form.
Posted by Terry on 07/18, 01:47 AM
I am very new. I dont understand how to "link" the html or css to the thumbnail on my page. Can i paste either code after the <head>? Then what? Do i have to draw an image map on the thumb in dreamweaver? If so, then what?

Thanks so much for helping this noobie!
Posted by Jim on 07/19, 08:31 PM
Very Nice! Just what I need, perfect! Thanks to Dynamic Drive.
Posted by jessie umipig on 07/20, 11:35 AM
I figured it out! I got it all working except one thing. I have 3 side by side (horizontally) pictures on my page. How do I get the popups for all 3 images to show up in one exact spot on the webpage? They're appearing fine, but they come up staggered next to each image. I want to "lock down" the position. How do I do this?

Thank you
Posted by Jim on 07/20, 11:47 AM
Is there a way that the text can be made to flow to the right of the thumbnails (and then be temporarily covered by the large image)?

I'm using css in Homesite.

Posted by Rosemary on 07/20, 02:46 PM

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

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.