Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> .content { width: 300px; height: 200px; border: 1px solid #000000; overflow: hidden; position: relative; cursor: pointer; } .content div { width: 100%; height: 100%; background: url("http://w3docs.com/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg"); background-position: center; background-size: cover; background-repeat: no-repeat; transition: all 1s; } .content div:hover { transform: scale(1.5); } </style> </head> <body> <p>Hover over the images to see the effect.</p> <div class="content"> <div></div> </div> </body> </html>