Dynamic Drive CSS Library- CSS Image Gallery

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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:

Simply beautiful.

So real, it's unreal. Or is it?

Sushi for dinner anyone?

Run wild with horses.
Dynamic Drive

Dynamic Drive
Zoka Coffee

Zoka Coffee

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:

<style type="text/css">

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>

The HTML:

<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> 

<a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a>

<br />

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a>

<br />

<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>

</div>

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 8 of 41 pages « First < 6 7 8 9 10 > Last »

oh yeah.... ok these pic are loaded in a loop and their values come from a database.

Posted by rich on 10/31, 01:07 PM

Is there any way to use this script within a PHP page? For example I've tried to enter it as HTML in to a Joomla page (including the CSS in the header) but it doesn't work.

Perphaps there is a PHP version?

Posted by Raymond on 11/06, 11:11 PM

Well obviously there isn't much compatibility with that code becuase I've got the latest versions of FireFox and IE and I can't see anything with either one.

Posted by Thomas on 11/09, 05:54 AM

I like this a lot. However, I am trying to use it for a page where the thumbnails overflow the browser window. When I scroll down and hover over those, the enlarged image is actually up higher and thus not visible.

I am trying to tweak it to put the enlarged image in a fixed position but I'm finding it difficult.

Any ideas?

Posted by Buck on 11/12, 02:32 PM

Nevermind. Figured it out. :)

Posted by Buck on 11/12, 02:41 PM

Hello, very nice!! Exellent!

I've made a php script that scanns his folder for image, create thumbnails with gd lib and make your css gallery!
You can add comments or legends under images.

change in css:
a {text-decoration: none;}/*Important not to see the horrible blue frame*/

and

.thumbnail:hover span{ /*CSS for enlarged image*/

visibility: visible;

top: 0;

left: 230px; /*position where enlarged image should offset horizontally */

z-index: 50;

position:fixed;/* if you have lots of image in your rep*/

}

you can try it or maybe improve it at http://barney37.free.fr/forum.php?go2sujet=./forum/3/sujet_1#abc4

Posted by barney on 11/15, 05:43 AM

That's beautiful! Just what I was looking for - thanks!

Posted by dkirker on 11/19, 02:00 PM

What if you had 2pages of images - clicking on the last image would still allow u to see the big image?

Posted by Pinkpanther on 11/25, 06:05 AM

Big thanks for this, my click to view full sized image in a new window was looking a little dated, replaced with this css gallery, looks much smoother. The only caveat is that this seems to need to load both the thumbnail and full sized image before the thumbnail is displayed, makes the inital page load a bit slower, but then much nicer and snappier afterwards.

Colin

Posted by Colin Hart on 11/25, 12:34 PM

That PHP script is great, but I cannot really ready French or whatever. I wish I could, seeing as it would make it much easier to edit.
If anyone has an English version of that script, or a slightly different script which does the same thing, email me please!
only1way4him [at] hotmail [dot]com

Posted by Steve on 11/27, 09:10 AM

Comment Pages 8 of 41 pages « First < 6 7 8 9 10 > Last »

Commenting is not available in this weblog entry.