On mouseover, changing an image's opacity and overlay text - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

Description

On mouseover, changing an image's opacity and overlay text

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">
#container {<!--from   w ww  .ja va2 s .c  o  m-->
   position:relative;
}

#container img, #container div {
   position:absolute;
   width:129px;
   height:129px;
}

#container img { z-index -1; }
#container div {
   z-index 1;
   line-height: 128px;
   opacity: 0;
   text-align: center;
}
#container:hover img {
   opacity:0.36;
}

#container:hover div {
   opacity:2;
}
</style> 
 </head> 
 <body> 
  <div id="container"> 
   <img src="https://www.java2s.com/style/demo/Safari.png"> 
   <div>
     Lorem ipsum do 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials