HTML CSS examples for CSS Widget:Hover Animation
Hover to scale and transform
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .image-effect div { animation-name:slideUp; transition:all 0.6s; -webkit-animation-name:slideUp; animation-duration:2s; -webkit-animation-duration:2s; animation-timing-function:ease; -webkit-animation-timing-function:ease; } .image-effect:hover div { transform:scale(0.26); transform-origin:top left; overflow:hidden; } </style> <!-- w ww .j a v a2s. c o m--> </head> <body> <div class="image-effect"> <div> <a href="https://www.java2s.com/style/demo/InternetExplorer.png"> <img class="size-full wp-image-225 alignleft" src="https://www.java2s.com/style/demo/Safari.png" alt="bg1" data-id="225"> </a> </div> </div> </body> </html>