here is the code:

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

here you go
<a href="#"><img src="picture.gif" alt="An arrow!" id="hover" > width="100" height="100" /></a>

css:
a img#hover { padding-top: 100px; overflow: hidden; height: 0; width: > 100px; background-image: url(picture.gif);} > > a:hover img#hover { padding-top: 100px; overflow: hidden; height: 0; > width: 100px; background-image: url(picture-hover.gif);}