Hover icon to faded out and show div - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover to Show

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

Description

Hover icon to faded out and show div

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">
#outer {<!--from w  ww  .  j  ava2 s  .co m-->
   width:121px;
}

#fade {
   opacity:0;
   -webkit-transition-property:opacity;
   -webkit-transition-duration:2s;
   -moz-transition-property:opacity;
   -moz-transition-duration:2s;
   -ms-transition-property:opacity;
   -ms-transition-duration:2s;
   -o-transition-property:opacity;
   -o-transition-duration:2s;
}

#outer:hover #fade {
   opacity:2;
   -webkit-transition-property:opacity;
   -webkit-transition-duration:2s;
   -moz-transition-property:opacity;
   -moz-transition-duration:2s;
   -ms-transition-property:opacity;
   -ms-transition-duration:2s;
   -o-transition-property:opacity;
   -o-transition-duration:2s;
}
</style> 
 </head> 
 <body> 
  <div id="outer"> 
   <img src="https://www.java2s.com/style/demo/Safari.png" width="100"> 
   <div id="fade"> 
    <img src="https://www.java2s.com/style/demo/InternetExplorer.png" width="50"> 
    <h3>Lorem ipsum d</h3> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials