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: 50% 65%; transition: transform 5s, filter 3s ease-in-out; filter: brightness(150%); } /* The Transformation */ .content:hover img { filter: brightness(100%); transform: scale(3); } </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>