Dynamic Drive CSS Library- CSS Image Gallery

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Color Inspiration Tool

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 (331)

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 33 of 34 pages « First < 31 32 33 34 >

very good

muy buena pagina

http://rocker0001.hi5.com

Posted by draken on 11/27, 12:23 PM

How do I get this to work in IE7? The larger images currently do not show up.

Posted by Sarah on 12/01, 11:07 AM

thanks for sharing your codes, hope it works on my site. I'll try it out now.

Posted by female libido enhancer on 12/03, 02:18 AM

hi i seem to have problems with this..if you have been successfull please help me..

or if you cant do it and getting no answer on this page...

bothways please visit : http://www.dynamicdrive.com/forums/showthread.php?p=173695#post173695

and we'll try to solve it together..thanks a lot

Posted by ratih on 12/04, 10:24 PM

i tried using this code yes it worked. i edited the size of the largest images but i get this extended bit of blank space under my gallery container meaning the user can scroll down.. how do i remove this?

Posted by luke midchesh on 12/07, 08:02 AM

Great code, it helps me a lot. Thanks for your time

Posted by velaz_plata on 12/10, 08:37 AM

this is nice!

Posted by Abruzzi the Jesus on 12/15, 01:00 PM

very good!

Posted by Abruzzi the Jesus on 12/15, 01:01 PM

hi
this is awsome ... do u have any ideas how i can apply this with wordpress! for each sngle post!
thanks

Posted by noha on 12/15, 01:15 PM

With ftp4net.com, you can access any FTP account through a Web interface -
no matter whether there is a firewall or not.
You can use ftp4net for the complete administration of your homepage,
downloading files or just making small changes.Its a total web based ftp solution

Posted by faysal on 12/22, 09:49 AM

Comment Pages 33 of 34 pages « First < 31 32 33 34 >