Hover to enlarge using animation - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Size

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Size

Description

Hover to enlarge using animation

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

div, section{<!--   w  w w . j a  va 2 s.  co m-->
   background-color: red;
   height: 10vh;
   width: 10vw;
}
body:not(.zoom) div, body:not(.zoom) section
{
   transition: width 0.7s;
}
div:hover, section:hover {
   width: 15vw;
}


      </style> 
 </head> 
 <body onresize="document.body.classList.add('zoom'); setTimeout(function(e){document.body.classList.remove('zoom')}, 100)"> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <section></section>  
 </body>
</html>

Related Tutorials