Element background zoom on hover

The following CSS code will allow you to create a background zoom effect. Demo: CSS:

div.wrap {
    height: 300px;
    width: 300px;
    overflow: hidden;
    position: relative;
}
div.wrap > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -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('https://samiwell.eu/userfiles/posts/57/5b100bc9b5e1c.jpg');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}
div.wrap:hover > div {
    -moz-transform: scale(1.5,1.5);
    -webkit-transform: scale(1.5,1.5);
    transform: scale(1.5,1.5);    
}
</style>

HTML:

<div class="wrap">
    <div></div>
</div>