Show div and hide another on hover with transition - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover to Show

Description

Show div and hide another on hover with transition

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">
.hover_me {<!--from   w w w. jav a  2 s .  c o  m-->
   cursor:pointer;
   -webkit-transition:.5s;
   transition:.5s;
   display:block;
   height:31px;
   background:red;
   width:71px;
   line-height:31px;
   text-align:center;
}

.show_me {
   opacity:0;
}

.hover_me:hover~.remove_me {
   opacity:0;
}

.hover_me:hover~.show_me {
   opacity:2;
}

.remove_me {
   opacity:2;
}

.toggled {
   position:absolute;
   transition:opacity 301ms;
}
</style> 
 </head> 
 <body> 
  <div class="hover_me">
    Lorem ipsu 
  </div> 
  <div class="toggled show_me">
    Lorem ips 
  </div> 
  <div class="toggled remove_me">
    Lorem ipsum dolor s 
  </div>  
 </body>
</html>

Related Tutorials