get a div that appears on hover to overlap all others - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover

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

Description

get a div that appears on hover to overlap all others

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">
.infohover {<!--from  w  w w.  j  av  a 2s .co  m-->
   display:none;
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   background-repeat:no-repeat;
   font-family:"proxima-nova";
   font-size:17pt;
   color:Chartreuse;
   height:351px;
   width:641px;
   padding:21px;
   padding-left:51px;
   text-align:left;
   position:absolute;
   top:0;
   left:351px;
}

a:hover~.infohover {
   display:block;
}

.circle-pic {
   position:relative;
}
</style> 
 </head> 
 <body> 
  <div class="meet-section"> 
   <h1 style="display: block; border-bottom: 7px solid #720045; font-weight: 600; font-size: 2em; margin-bottom: 30px;">Lorem ipsu</h1> 
   <div class="circle-pic"> 
    <h1 class="employee">Lorem ips</h1> 
    <a href="https://www.java2s.com/style/demo/Firefox.png"> <img src="https://www.java2s.com/style/demo/Google-Chrome.png" onmouseover="this.src='http://www.plumdm.com/test/wp-content/uploads/2014/02/liz-small-ring.png'" onmouseout="this.src='http://www.plumdm.com/test/wp-content/uploads/2013/12/liz-small.png'"> </a> 
    <h2 class="position">Lorem ipsum d</h2> 
    <p>Lorem ipsum </p> 
    <div class="infohover"> 
     <img src="https://www.java2s.com/style/demo/Opera.png"> 
     <br>Lorem ipsum dolor 
    </div> 
   </div> 
   <div class="circle-pic"> 
    <h1 class="employee">Lorem</h1> 
    <a href="https://www.java2s.com/style/demo/Google-Chrome.png"> <img src="https://www.java2s.com/style/demo/Firefox.png" onmouseover="this.src='http://www.plumdm.com/test/wp-content/uploads/2014/02/peter-small-ring.png'" onmouseout="this.src='http://www.plumdm.com/test/wp-content/uploads/2013/12/peter-small.png'"> </a> 
    <h2 class="position">Lorem ipsum dolor si<br>Lorem ipsum do</h2> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials