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

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
Copyright 2006-2016 Dynamic Drive