Image hover-zoom effects

STEP-01

The Markup

The HTML is very simple. We have .img-container as the container wrapping our img.

<div class="img-hover-zoom"> /*class*/
  <img src="/path/to/image/" alt="This zooms-in really well and smooth">
</div>

You may iterate this piece of code as many times as you want in your project.

The CSS

Observe the below CSS.

/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}/*manage your scale meter as you want*/