[CSS] Creating a Zoom Effect on a background image on hover using CSS
-- HTML --
<div class="overlay">
<div class="img" style='background-image: url("image.png");'>
</div>
</div>
-- CSS --
.img{
display: block;
width: 300px;
height: 300px;
background-position: 50%;
background-repeat: no-repeat;
background-size: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.overlay:hover > .img{
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}