Source Code:
(back to article)
Submit
Result:
Report an issue
<!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>