Enlarge an element in place with animation - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Size

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

Description

Enlarge an element in place with 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">

body {-webkit-transform:translateZ(0); /* Fix webkit flicker*/}
.box {<!--from w  ww  . j av a  2s  .  com-->
   position:relative;
   z-index:1;
   display: block;
   float: left;
   width: 80px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   background-color: #f4faff;
   border: 1px solid #e0eeff;
   margin: 10px;
   -webkit-transition:-webkit-transform 0.5s ease-in-out;
   -moz-transition:-moz-transform 0.5s ease-in-out;
   transition:transform 0.5s ease-in-out;
}
.box:hover {
   -webkit-transform:scale(2);
   -moz-transform:scale(2);
   transform:scale(2);
   z-index:2;
}
.content {
   text-align: center;
   background-color: #f5f5f5;
   clear: both;
}


      </style> 
 </head> 
 <body> 
  <div class="content">
    Content before 
  </div> 
  <div class="box">
    First 
  </div> 
  <div class="box">
    Second 
  </div> 
  <div class="box">
    Third 
  </div> 
  <div class="box">
    Fourth 
  </div> 
  <div class="content">
    Content after 
  </div>  
 </body>
</html>

Related Tutorials