What about using CSS3 transform property and use scale which ill give a zoom like effect, this can be done like so,
HTML
<div class="thumbnail">
<div class="image">
<img src="http://placehold.it/320x240" alt="Some awesome text"/>
</div>
</div>
CSS
.thumbnail {
width: 320px;
height: 240px;
}
.image {
width: 100%;
height: 100%;
}
.image img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
Here's a demo fiddle. I removed some of the element to make it simpler, you can always add overflow hidden to the .image to hide the overflow of the scaled image.
zoom property only works in IE