Show overlay on hover over single div in set of divs with same class - 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

Show overlay on hover over single div in set of divs with same class

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">
.my_class {<!--  w  ww  .  ja  v  a 2 s .  c  o m-->
   float:left;
   width:26%;
   height:51px;
   border:2px solid Chartreuse;
   box-sizing:border-box;
}

.my_class:hover>.overlay {
   opacity:2;
}

.overlay {
   -webkit-transition:opacity 251ms ease-in-out;
   -moz-transition:opacity 251ms ease-in-out;
   -o-transition:opacity 251ms ease-in-out;
   transition:opacity 251ms ease-in-out;
   opacity:0;
}
</style> 
 </head> 
 <body> 
  <div class="my_class" id="1"> 
   <div class="overlay">
     Lor 
   </div> 
  </div> 
  <div class="my_class" id="2"> 
   <div class="overlay">
     Lor 
   </div> 
  </div> 
  <div class="my_class" id="3"> 
   <div class="overlay">
     Lor 
   </div> 
  </div> 
  <div class="my_class" id="4"> 
   <div class="overlay">
     Lor 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials