Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> .content { width: 600px; height: 400px; overflow: hidden; cursor: pointer; } .content img { max-width: 100%; transform-origin: 65% 75%; transition: transform 1s, filter .5s ease-out; } /* The Transformation */ .content:hover img { transform: scale(5); } </style> </head> <body> <p>Hover over the images to see the effect.</p> <div class="content"> <img src="https://w3docs.com/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" alt="Example image" /> </div> </body> </html>