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

This is how I fix the first image to stay put. When you mouseover, the background color of DIV covers this image, regardless of image size that is moused over. Works with IE6 & Ns 7.2.

<div class="gallerycontainer">

<div style="text-align:center;font-size:1.2em;position:absolute;left:343;width:470;height:470;">
newport.jpg
Newport Cemetery - Newport Ohio</div>
Posted by Jack Duffey on 04/05, 03:37 PM
This is a good aligned image preview. We will be including this in our next css gallery design! - Thanks CSS Gallery.com.
Posted by CSS Gallery on 04/06, 03:55 PM
Thats awesome, exactly what I was looking for.
Posted by Hoteller i Berlin on 04/07, 02:41 AM
How do you force the enlarged image to stay in one spot even if the browser window scrolls down. The image is at the top of the screen and when Iscroll down it doesn't move down with me. I really like this script...thanks so much.
Posted by Shirley Dickie on 04/10, 02:04 AM
i want to put my css image gallery into a scroll box... what code do i need for the pictures to come out of the scroll box when i hover?
Posted by Alma on 04/15, 11:58 AM
I am getting everything on there, but when I preview the page, everything that is supposed to be hovering is next to the original image. Please someone am I putting the code incorrectly?

<div class="gallerycontainer">

[url="#thumb"class="thumbnail" ]http://getit-good.webs.com/undefined/37107.gif<span>http://getit-good.webs.com/undefined/37107.gif
Feed or water the wildest pooch in high style with this ceramic leopard-patterned bowl! 6 1/2" diameter x 2 1/2" high.</span>[/url]

[url="#thumb"class="thumbnail" ]http://getit-good.webs.com/catalog/37082.gif<span>http://getit-good.webs.com/catalog/37082.gif
For the casual canine, a delightful ceramic food or water bowl with a polyresin blue jean design. 6 1/4" diameter x 2 3/4" high. </span>[/url]


</div>
Posted by Stevie on 04/22, 03:43 AM
Thanks for all the team of dynamic drive.
Posted by Manoj Rathore on 04/23, 01:08 AM
Is there a simple, or effective way of making the bigger image show up into another <div> layer?

I'm not very skilled nor am I inept, kinda just above an amateur web designer but just below the professional.

I basically want it to look similar to what I already have with my html code @ http://www.kazenracing.com/8into1.shtml

but without having to have separate pages for each 'larger' picture, otherwise by the time the site is actually completed there is gonna be hundreds of pages, and i don't want that. :D
Posted by Serosis on 04/23, 01:21 PM
Is there a hack around IE6 because the images don't show up on rollover in IE6... just the alt tag...
Posted by web_girl on 04/23, 03:32 PM
Well I know for a fact that some CSS hover overs and whatnots usually need some accompaning javascripts to work in IE6 remotely properly.

I went through that same deal with my dropdown menu and just said screw IE6 users, I am not using ugly code just to get one feature in there when it just as simple for the end user to upgrade their browser to one of the others that do support full CSS . IE7 has been out for a couple years now and even IE8 is out.

But don't upgrade to IE8, my god that one breaks a lot of sites.
Posted by Serosis on 04/23, 06:12 PM

Comment Pages 39 of 41 pages « First  <  37 38 39 40 41 >


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