This tutorial is aimed at controlling the size of the thumbnails appearing on your page. Sometimes we don't have enough space to spare to fit in large thumbnails and yet we would like to avoid small and barely recognizable images. Using this trick we limit the default dimensions of the thumb, and show it in full size when user mouse-overs it.

Take a look at the demo | Download zip file

Overview

What we have here is not actual image resizing. It is a resizing of the thumb's visible area on mouse over. How do we do that? Using overflow property!
The overflow property defines the appearance of the content when it overflows the container area. If the container has limited size, for one reason or another, then we use overflow to define what happens. Possible values of overflow property are visible, hidden, scroll and auto. It's the combination of these values that we will use here and make this trick work. Basically, we will hide a part of the thumbnail when in default state, and show it entirely on mouse over.

The Concept

The idea behind this is, to place an image into a certain container. Since we're talking about thumbnails that container would be an <a> tag. We set the size (width and height) of the container to desired values and we set the position property of the container to relative. Image inside has an absolute position. We use negative top and left values to offset the image. Container 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 container's overflow to visible, and reveal entire image.

The Code

This trick can be used for thumbnail lists or single thumbnails, as shown on the demo page. For markup we use standard tags

<a href="#"><img src="image.jpg"  alt="my image" /></a>

Definition of the default state for thumbnails would 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 has defined width and height to whatever fits into our site's design. Also, overflow is set to hidden. We then play with negative top and left values to "crop" the image to a perfect fit. If you want to take this further, you can define cropping area for every single image you have in thumb list and target the area you would like to show.

ul#thumbs a img{
  float:left;
  position:absolute;
  top:-20px;
  left:-50px; 
 }
 ul#thumbs li#image1 a img{
  top:-28px;
  left:-55px; 
 } 
 ul#thumbs li#image2 a img{
  top:-18px;
  left:-48px; 
 } 
 ul#thumbs li#image3 a img{
  top:-21px;
  left:-30px; 
 } 
 .
 .
 .

Now, when user mouse-overs it we set the overflow to visible:

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

Note the z-index for both default and hovered container. This is very important because we want to place the hovered above it's siblings. Otherwise it would be placed below and the trick wouldn't be complete.