Take a look at this practical demonstration
observe the html
<p>Background image:</p>
<div class="zoom-bg"></div>
<p>Using nested image and <code>object-fit</code>:</p>
<div class="zoom-img">
<img src="https://placeimg.com/300/200/arch">
</div>
take a look at the css
.zoom-bg {
width: 300px;
height: 200px;
overflow: hidden;
}
.zoom-bg:before {
content: '';
display: block;
width: 100%;
height: 100%;
background: url(https://placeimg.com/300/200/nature) no-repeat center;
background-size: cover;
transition: all .3s ease-in-out;
}
.zoom-bg:hover:before {
transform: scale(1.2);
}
.zoom-img {
width: 300px;
height: 200px;
overflow: hidden;
}
.zoom-img > img {
object-fit: cover;
width: 100%;
height: 100%;
transition: all .3s ease-in-out;
}
.zoom-img:hover > img {
transform: scale(1.2);
}
experience the live demo by visiting this codepen link