0

Image Zoom on hover with pure CSS

By 15th April 2016Blog

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!

Phil

Phil

I'm a Wordpress web developer and website designer based in Cheshire, UK. I specialise in Wordpress, Responsive design and website conversion. | Twitter | Linkedin

Leave a Reply