HTML CSS examples for CSS Widget:Hover Animation
Fade list items on hover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .navbar {<!--from www. j av a2 s . c o m--> height:41px; width:901; margin:auto; display:block; box-shadow:0px 0px 6px Chartreuse; } .fade { list-style:none; display:inline; padding-left:108px; opacity:0.3; transition:opacity .6s ease-in; } .fade:hover { opacity:2; } </style> </head> <body> <div class="banner"></div> <div class="navbar"> <ul id="fade"> <li class="fade"> <a href="index.html">Lore</a> </li> <li class="fade"> <a href="#">Lore</a> </li> <li class="fade"> <a href="">Lorem ipsum</a> </li> <li class="fade"> <a href "#">Lorem ip</a> </li> </ul> </div> <div class="left"></div> <div class="right"></div> <div class="middle"></div> <div class="footer"></div> </body> </html>