Hover to fly in one by one - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover

Description

Hover to fly in one by one

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.my-element {<!--   w  w w.j  av a 2  s  .c  om-->
   -moz-transition: opacity 0.3s;
   -o-transition: opacity 0.3s;
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   opacity: 0;
   display: inline-block;
   vertical-align: middle;
   *vertical-align: auto;
   *zoom: 1;
   *display: inline;
   margin: 5px;
   width: 100px;
   height: 100px;
   background: tomato;
}
.my-element:nth-child(1) {
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -webkit-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.my-element:nth-child(2) {
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -webkit-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.my-element:nth-child(3) {
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -webkit-transition-delay: 0.3s;
   transition-delay: 0.3s;
}
.my-container:hover .my-element {
   filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
   opacity: 1;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="my-container"> 
   <div class="my-element"></div> 
   <div class="my-element"></div> 
   <div class="my-element"></div> 
  </div>  
 </body>
</html>

Related Tutorials