Edit in JSFiddle

<div class="outer">
    <div class="inner"></div>
</div>
* { margin: 0; padding: 0; } /* resets, you do not need this line */

.outer {
    /* set your width and height here on the outer div */
    width: 100%;
    height: 500px;
    
    
    position: relative;
    overflow: hidden; /* comment this line to see what happens behind the scenes */
}
.inner {
    width: 100%;
    height: 100%;
    background-image: url('https://unsplash.it/950/950?image=690');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition-duration: 0.3s; /* set the speed of your animation */
}
.outer:hover .inner {
    transform: scale(1.5);
}