<!DOCTYPE html>
<html>
<head>
<style>
.content {
overflow: hidden;
height: 400px;
}
.zoom {
height: 400px;
position: relative;
text-align: center;
cursor: pointer;
margin-bottom: 10px;
background-position: center;
background-size: cover;
overflow: hidden;
background-image: url('http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg');
-webkit-transition: all 0.3s ease-in-out;
}
.zoom:hover {
-webkit-transform: scale(1.6, 1.6);
transform: scale(1.6, 1.6);
-webkit-transition: all 0.3s ease-in-out;
}
</style>
</head>
<body>
<p>Hover over the images to see the effect.</p>
<div class="content">
<div class="zoom"></div>
</div>
</body>
</html>