Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

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:

The HTML:

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

this works...but not when i close my sidebars...then the images shift in both browsers..any ideas?
Posted by janet on 05/10, 08:21 PM
It helps me alot!! I love MY dynamicdrive guide!
Posted by emily on 05/11, 05:34 AM
I will learn much from this THANKX!
Posted by Bill on 05/11, 10:49 AM
Well the code is excellent, i just tested it on my website but hasnt been uploaded yet, The only thing am trying to do is to put a text link on top for users who wants to print the image (Big Image) when they hover on the thumbnails. Can you help me out?....when the link is entered i cant no more point my cursor on the image!
Posted by David on 05/12, 02:22 AM
How quickly would this load if there were a lot of images? Does it "pre-load" every single image into the browser?
Posted by TJ on 05/12, 11:01 AM
Great code, thanks a lot. You mention that the behaviour can be modified to show onClick. Could you tell me how, please? (I know how to do that in Dreamweaver, but not with css). Thanks
Posted by Adriana on 05/13, 02:33 AM
well quite a few, some images are about 100kb, ive tried doing with css, but seems to me that it is not really quicker. Do you have any idea how to print the image?
Posted by David on 05/15, 12:53 AM
The images are all loaded in the first. There is no use of javascript, just pure CSS.

"How quickly would this load if there were a lot of images? Does it "pre-load" every single image into the browser?"
Posted by Nitrolinken on 05/17, 11:40 AM
Excelent.
I'm will use this code on my next projects
Regards
Posted by phpwebdev on 05/17, 01:55 PM
<b>Very good, check it out here http://www.cals-cool-stuff.co.uk/chp/haywood.html
Posted by Callum Haywood on 05/27, 08:11 AM

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

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