This snippet uses a placeholder image to demonstrate the desired outcome. I've drawn inspiration from this source for the CSS code. It's important to note that the background image div is enclosed within an outer DIV, which is crucial for achieving the zoom effect upon hover. When hovered over, the outer DIV expands to accommodate the increased dimensions of the inner div containing the background image.
html, body {
height: 100%;
}
div.wrap {
height: 350px;
margin-top:0;
margin-bottom:0;
margin-left:auto;width:100%;margin-right:auto;
overflow: hidden;
position: relative;
}
div.wrap > div {
position: absolute;
top: 10vh;
left: 33vw;
height: 200px;
width: 400px;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
background-image: url('http://lorempixel.com/400/200/sports/1/' center center no-repeat);
-moz-background-size: 100%;
-webkit-background-size: 100%;
background-size: 100%;
z-index: -1;
}
div.wrap:hover > div {
-moz-transform: scale(1.10,1.10);
-webkit-transform: scale(1.10,1.10);
transform: scale(1.10,1.10);
}
<div class="wrap">
<div class="imagezoom"><img src="http://lorempixel.com/400/200/sports/1/" border="5" width="400" height="200"> </div>
</div>
To see the full effect, switch to "Full Page" mode in the code viewer.