Inspired by the article Create Resizing Thumbnails Using Overflow Property on cssglobe.com I changed the CSS to really increase the image on mouseover and to have a different color (blackandwhite) version of the imaged used as the thumbnail.

This page is showing my version of pure CSS thumbnails. Just mouseover the small ones to get the full size version. There is no need for Javasript.

Off course: it is a complete missuse considering what thumbnails intended to be used for. As the full size version is loaded too, there is no saving in data. So it wouldn’t be a good idea to use the technique for a very large gallery.

Restrictions: – two versions for the image needed (of course) – full size version should not be bigger than 3x thumbsize! – each thumbnail needs its own id. You can use PHP: set a counter and let it generate your ids and css.

CSS:

.thumb img
{
   width: 100px;
   visibility: hidden;
}
.thumb a
{
   width: 100px;
   display: block;
   float: left;
   overflow: hidden;
   height: 65px; z-index:1;
   position: relative;
   margin: 0 20px 0 0;
   border: solid 1px #ccc;
}
.thumb a:hover
{
   overflow:visible; z-index: 1000;
}
.thumb a:hover img
{
   width: 250px;
   position: absolute;
   margin-left: -125px;
   margin-top: -50px;
   visibility: visible;
}

.thumb #m01	{background: url(01s.jpg);}
.thumb #m02	{background: url(02s.jpg);}
.thumb #m03	{background: url(03s.jpg);}

HTML:

<div class="thumb">
	<a href="#" id="m01"><img src="01.jpg" /></a>
	<a href="#" id="m02"><img src="02.jpg" /></a>

	<a href="#" id="m03"><img src="03.jpg" /></a>

<br class="nofloat"/>
</div>

Lazy guy version

I know! People looking for a little CSS Snipplet like this and not doing the work themself are lazy people. So, to support your lazyness, here is the “lazy guy version” using only one picture for the thumbnails and the full size version. The thumbs are scaled by CSS. The CSS is much smaller as there is no need to add a unique ID to every thumbnail.

CSS:

.thumb img	{width: 100px;}
.thumb a
{
   width: 100px;
   display: block;
   float: left;
   overflow: hidden;
   height: 65px;
   z-index:1;
   position: relative;
   margin: 0 20px 0 0; 

   border: solid 1px #ccc;
}
.thumb a:hover	{overflow:visible; z-index: 1000;}
.thumb a:hover img
{
   width: 250px;
   position: absolute;
   margin-left: -125px;
   margin-top: -50px;
}

HTML:

<div class="thumb">
	<a href="#"><img src="01.jpg" /></a>
	<a href="#"><img src="02.jpg" /></a>
	<a href="#"><img src="03.jpg" /></a>
<br class="nofloat"/>
</div>