Here’s a short snippet for getting a nice fancy zoom when hovering over an image using purely CSS3. Here’s an example:

and here’s the code:
.img-zoom {
top: 0;
left: 0;
margin: 0;
display: block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.img-zoom img {
-webkit-transform: scale(1.04);
-ms-transform: scale(1.04);
transform: scale(1.04);
transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.img-zoom img:hover {
-webkit-transform: scale(1.21);
-ms-transform: scale(1.21);
transform: scale(1.21);
}
You simply need to add the class ‘img-zoom’ to any image’s container to get the effect.
<div class="img-zoom"><img src="myimage.jpg" alt="" title=""></div>
Feel free to play about with the values in the zoom to alter sizes and zoom magnitudes. You could even add more effects such as changing filters, rotation and more!