Apply hover in and out ease effect using animation - HTML CSS CSS

HTML CSS examples for CSS:Animation

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

Description

Apply hover in and out ease effect 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">
#highlights {<!-- w w  w.  j  av  a2s . c  o  m-->
   min-height:526px;
   width:1171px;
   margin:0 auto;
}

#highlights div[class*="high-"] {
   border:2px solid Chartreuse;
   display:inline-block;
   float:left;
   height:151px;
   margin:11px;
   position:relative;
   width:calc(34% - 21px);
   overflow:hidden;
}

#highlights .image {
   height:100%;
   transition:all 2.3s ease;
}

#highlights p {
   bottom:0;
   height:61px;
   margin-bottom:0px;
   position:absolute;
   opacity:0.8;
   transition:all 0.7s ease;
   transform:translateY(61px);
}

#highlights span {
   display:block;
   font-size:13px;
   margin:3px;
}

#highlights:hover p {
   transform:translateY(0px);
   background:yellow;
   color:blue;
}

#highlights:hover .image {
   transform:all 6s ease;
   margin-right:-51px;
}

#highlights .high-rinoplastia .image {
   background:url('http://www.java2s.com/style/demo/Google-Chrome.png') no-repeat right center;
}

#highlights .high-venas .image {
   background:url('http://www.java2s.com/style/demo/Google-Chrome.png') no-repeat right center;
}

#highlights .high-cirugiaCalvicie .image {
   background:url('http://www.java2s.com/style/demo/Google-Chrome.png') no-repeat right center;
}

#highlights .high-tratamientoCalvicie .image {
   background:url('http://www.java2s.com/style/demo/Google-Chrome.png') no-repeat right center;
}
</style> 
 </head> 
 <body> 
  <article id="highlights"> 
   <div class="high-rinoplastia"> 
    <div class="image"> 
    </div> 
    <p> <strong>Rinoplastia</strong> <br> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</span> </p> 
   </div> 
  </article>  
 </body>
</html>

Related Tutorials