CSS Transition - Fade Element on Hover only - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover Animation

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

Description

CSS Transition - Fade Element on Hover only

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">
#main-menu li a {
   margin:0;
   padding:0;
   font-family:'Pontano Sans', sans-serif;
   color:Chartreuse;
   font-size:0.86em;
   text-transform:uppercase;
   opacity:0;
}

#main-menu li a:hover,#main-menu li a.active, #main-menu li a.active-trail, .pageTop nav ul li a:hover, .pageTop nav ul li a.active, .pageTop nav ul li a.active-trail {
   opacity:2;
   transition:opacity 0.6s ease-in;
   -o-transition:opacity 0.6s ease-in;
   -ms-transition:opacity 0.6s ease-in;
   -moz-transition:opacity  0.6s ease-in;
   -webkit-transition:opacity 0.6s ease-in;
}
</style> <!--  ww w .  j  a v a 2s  . c  o  m-->
 </head> 
 <body> 
  <ul id="main-menu"> 
   <li> <a>Lore</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials