Web/ Design/ Vista

Resources for Designers & Developer

Create Image Zoom in / out Effect on Mouse Hover with CSS

I was looking for a way to zoom into an image on mouse hover. Turned out, it is rather easy with CSS.

Let us check it out.

<div id='img-cont'>
 <img src="https://source.unsplash.com/350x200/?nature">
</div>

Output:

Now apply the following styling to parent division:

#img-cont {
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -ms-transition: -ms-transform 0.5s;
    transition: transform 0.5s;
}
#img-cont:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    cursor: pointer;
}

Output:

Wrapping it up inside another division creates a nice effect:

<div id='img-cont-p'>
 <div id='img-cont'>
  <img src="https://source.unsplash.com/350x200/?nature">
 </div>
</div>

And change the styling accordingly:

#img-cont {
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -ms-transition: -ms-transform 0.5s;
    transition: transform 0.5s;
}
#img-cont:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    cursor: pointer;
}

#img-cont-p {
     overflow: hidden;
}

Output:

Image credit: Unsplash