Image Zoom on hover with pure CSS

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.

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!