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 41 of 41 pages « First  <  39 40 41

Thanks it works great but my problem is when I set the position of the enlarge images (left & top) they are good only in IE but in the other browsers they donít show up on the right place. What should I do to show them on a fix place in all browsers?
Posted by Amen on 06/03, 01:26 AM
This works great in FF, but on IE7, the images flickers badly, and wont stay positioned. I am trying to have the enlarged image stay "fixed", and was able to get it to stay on FF with the 'position: fixed' entry in the '.thumbnail:hover span' section, but that drove IE7 crazy. I tried everything. I can't seem to reach a happy medium here...
Posted by brian on 06/03, 03:06 AM
@sajeev
"Can u suggest an idea to incorporate this gallery with internet explorer 6 ? "

Javascript.
Posted by Serosis on 06/03, 10:24 AM
I love your gallery. It works great. I would like to have the viewer open with the first picture - like a mouseover event on the page load. Do you have an example of this?
Posted by Bud Hines on 06/06, 02:46 PM
Need to read next time, the description says it works with IE6+. I feel sheepish :D
Posted by Serosis on 06/06, 05:36 PM
how do i use this script with drmwver?
Posted by terry on 06/08, 02:29 PM

Comment Pages 41 of 41 pages « First  <  39 40 41


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