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


CSS code:

<style type=”text/css”>

/*URL: http://www.Branding-Studio.com.com/ */

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

HTML code:

<div class=”gallerycontainer”>

<a class=”thumbnail” href=”#thumb”><img src=”images/firstimage.jpg” width=”100px” height=”66px” border=”0″ /><span><img src=”images/firstimage.jpg” /><br />Simply beautiful.</span></a>

<a class=”thumbnail” href=”#thumb”><img src=”images/ocean.jpg” width=”100px” height=”66px” border=”0″ /><span><img src=”images/ocean.jpg” /><br />Beautiful OCEAN</span></a>

<br />

<a class=”thumbnail” href=”#thumb”><img src=”images/fun.jpg” width=”100px” height=”75px” border=”0″ /><span><img src=”images/fun.jpg” /><br />Is it FUN?</span></a>

<a class=”thumbnail” href=”#thumb”><img src=”images/horse.jpg” width=”100px” height=”70px” border=”0″ /><span><img src=”images/horse.jpg” /><br />RUN RUN RUN</span></a>

<br />

<a class=”thumbnail” href=”#thumb”>Super Man<span><img src=”images/super.gif” /><br />Super Man</span></a>

<br />

<a class=”thumbnail” href=”#thumb”>Google<span><img src=”images/google.gif” /><br />Google</span></a>

</div>

Just change some files or paste your own images in this html code ;)