Effect How to - Hover image to show background with content

Question

We would like to know how to hover image to show background with content.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!-- w  w w.j  av a2 s  . c o  m-->
    position: relative;    
}
div img{
    padding:0 10px;    
}
.link-cont {
    background: #EEE;
    position: absolute;
    bottom: 0;
    width: 370px;
    height: 210px; 
    opacity: 0;
    transition: all 0.4s;
    z-index: -1
}
div:hover .link-cont {
    opacity: 1; 
    bottom:-40px;
}
.link-cont a{    
    opacity: 0;  
}
div:hover  .link-cont a{
    position: relative; 
    opacity: 1; 
    bottom:-175px;
    left:10px;
    background:#fff;
    color:red;
    text-decoration:none;
    padding:0 10px;
}
  </style>
</head>
<body>
  <div>
    <img src="http://www.java2s.com/style/download.png"/>
    <div class="link-cont"><a href="#">click here to see more info</a></div>
</div>
</body>
</html>

The code above is rendered as follows: