How to zoom in on the image when the mouse hovers over it?

Question

Like the one on that site -> https://flamengomaior.com.br/

A smooth zoom made from this site. What is the simplest way to do this? If possible in CSS/Html.

Answer 1

You use scale in the image with :hover and overflow: hidden in div which contains it. You adjust the scale as per your liking where, 1.1, for example, increases the image by 10%, and .5s is the transition time (half a second or 500 milliseconds).

The function scale basically changes the zoom of the element (more about here).

The overflow: hidden prevents the image leak out of div when zooming.

The basic structure would be this using a div, but you can use a link <a> also, if you wish:

.img-container{
   width: 300px;
   height: 200px;
   overflow: hidden;
   border: 2px solid #000;
}

.img-container img{
   width: 100%;
   height: 100%;
   -webkit-transition: -webkit-transform .5s ease;
   transition: transform .5s ease;
}

.img-container:hover img{
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
}

<div class="img-container">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
</div>