Css hover to change opacity value of other element to show it - 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

Css hover to change opacity value of other element to show it

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">
.logoDesc {<!--from   w  w  w  .java 2  s  .c  om-->
   transition:opacity .3s ease-in-out;
   opacity:0;
}

.logoWrap:hover .logoDesc {
   opacity:2;
}
</style> 
 </head> 
 <body> 
  <div class="logoWrap"> 
   <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
   <p class="logoDesc">Lorem ipsum dolo</p> 
  </div>  
 </body>
</html>

Related Tutorials