How to zoom in on the image when the mouse passes over it? [duplicate]

You use scale in the image with :hover and overflow: hidden in div that contains it. You set the scale to 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 scale function basically alters the zoom of the element ( more about here

The overflow: hidden prevents the image from flowing out when zooming.

The basic structure would be this using a div , but you can use a div link too 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>