Make div a box element and show it on hover - 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

Make div a box element and show it on hover

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="description" content="Mein Projekt zu Australien."> 
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
  <style>
html {<!--from   w w  w .j  a va2  s .  c  o  m-->
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat center center fixed;
   -webkit-background-size:cover;
   -moz-background-size:cover;
   -o-background-size:cover;
   background-size:cover;
}

iframe {
   float:left;
   clear:left;
}

.test {
   width:151px;
   height:151px;
   margin:auto;
   border-spacing:16px;
   border-style:ridge;
   float:left;
}

.showme {
   display:none;
}

.showhim:hover .showme {
   display:inline-block;
}

.row:hover .select {
   display:block
}

.select {
   display:none;
}
</style> 
 </head> 
 <body> 
  <iframe src="links.html" width="200" height="1000px"></iframe> 
  <div class="test showhim">
    Lorem ipsu 
   <div class="1 showme">
     Lore 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials