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 5 of 41 pages « First  <  3 4 5 6 7 >  Last »

Great code! Trying to use Javascript galleries on eBay is a nightmare, but this is perfect! The code almost looks like a piece of art!

Many thanks!
Posted by dpx on 08/12, 07:49 PM
Great script! Thanks a lot. I do have one question: I have been trying to use the script in a CSS template. I have inserted the code in the editable region on one of the pages and I have been trying to get the text below to wrap the gallery... In this case the gallery would act like one block image (composed of smaller images) surrounded by text. I have played around with the div tags, but have been unable to blend the gallery and wrap the surrounding text next to it.

Have any ideas? Much thanks once again!
Posted by Ivo Dimitrov on 08/14, 01:05 AM
Brilliant.
Posted by Adam on 08/17, 03:08 AM
hey--

i love this web layout so I created a webpage with this setup (with a few custom tweaks) for my recent vacation.

It is located at

http://www.geocities.com/mikeart31/album_MB.html

i don't know why the words are listed vertically. any ideas why?

thanks
Posted by Mike on 08/17, 10:31 PM
If I understand the code well, all images are loaded in full format when opening the page. This, of course, slows down the opening of the page.
Is there any way to have only the small thumbs loaded quickly at the outset and the bigger ones when hovering over the thumbs?
Posted by Erik on 08/24, 12:00 AM
I can't believe I wasted my time posting my cross-browser enhancements to this CSS code. Apparently, this thread is only for positive "thank you, this is great" comments. Too bad. Makes me want to look elsewhere for scripting ideas. I expect this post will be deleted as well.
Posted by MrSpock on 08/24, 02:30 PM
Great script, no problems. As far as a comment earlier on preloading, one could use a preload page that leads into the gallery.

As well with a correctly sized header placed on the page the images won't shift when you close your sidebars.
Posted by Jens Jensen on 08/30, 10:21 PM
Shit of firefox!I have tried to put some REQUEST attribute, like "alt", or title for increase accessibilty and I have totally lost the structure how it should be. Bug!!!!!
Posted by carlo on 09/12, 04:20 PM
is there a way to cause the last image you hovered over to remain in the gallery container even when your mouse isn't hovering over it?
Posted by jwpbrock on 09/12, 10:15 PM
awsome job on this picture gallery something i was going to do in flash but this is 10x better.
Posted by rlm on 09/17, 02:26 PM

Comment Pages 5 of 41 pages « First  <  3 4 5 6 7 >  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.