change an image and text to text on mouseover - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text

Description

change an image and text to text on mouseover

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum dolor sit amet, consectetur adipiscing e</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
div {<!--from www  . j av  a2 s . co  m-->
   width:301px;
   height:251px;
   float:left;
   text-align:center;
   margin:0;
   text-align:center;
   font-family:'Open Sans';
   text-decoration:none;
}

#I_hide {
   display:none;
}

#I:hover #I_hide {
   display:block;
   position:absolute;
   top:0;
   left:0;
   border:3px solid Chartreuse;
   background:yellow;
   transition:All .5s ease-in-out;
   -webkit-transition:All .5s ease-in-out;
   -moz-transition:All .5s ease-in-out;
   -o-transition:All .5s ease-in-out;
}
</style> 
 </head> 
 <body> 
  <div id="I">
    Lorem ipsum dolor 
   <div id="I_hide"> 
    <h3>Lorem ipsum </h3> 
    <p>Lorem ipsum dolor sit am</p> 
    <a href="#">Lore</a> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials