Creating Resizing Rollover Thumbnails

Sometimes we just don't have enough space to fit in large thumbnails in certain places but we would like to avoid small and hard to recognize images. Limiting the default dimensions of the thumb we can show the thumbnail in full size when user mouse-ove it. What we have here is not actual image resizing. It is a resizing of the thumb's visible area on mouse over using the overflow property!

The idea is simple, place an image into a certain tag. Since we're are dealing with thumbnails that tag would be an <a> tag. We set the size (width and height) of the tag to values we want and we set the position property of the tag to relative. The image inside has an absolute position. We will use negative top and left values to offset the image. The tag has overflow set to hidden so only a part of the image that is placed inside the container's actual area will be visible. The rest of it will be hidden. On a:hover we set the tag's overflow to visible, and reveal entire image.

For markup we use standard tags 

<a href="#"><img src="image.jpg"  alt="your picture name" /></a>

You will need to define the default state for thumbnails so it should be something like this: 

ul#thumbs a{
		display:block;
		float:left;
		width:100px;
		height:100px;
		line-height:100px;
		overflow:hidden;
		position:relative;
		z-index:1;		
	}
	ul#thumbs a img{
		float:left;
		position:absolute;
		top:-20px;
		left:-50px;	
	}

<a> tag now has a set width and height to whatever fits into your site design. Also, overflow is set to hidden. We now need play with negative top and left values to "crop" the image to a perfect fit. If you want, you can define cropping area for every image you have in your thumb list and target the area you would like to show. Now, when user mouse-overs it we need to set the overflow to visible: 

ul#thumbs a:hover{
			overflow:visible;
			z-index:1000;
			border:none;		
		}

The z-index for both default and hovered tag. This is very important, we want to place the hovered above it's siblings. Otherwise the thumbnail would be placed below and the resize would not look correct showing up under it's sibling.