We would like to know how to overlay text on image when hovering.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#current {<!--from www . j a va 2 s . com-->
position: relative;
float: center:
height:500px;
width: 300px;
background-color: #AAA;
padding-bottom: 10px;
text-align: center;
border-style: solid;
border-color: #red;
}
#current:hover .text {
display: block
}
.text {
display: none;
position: absolute;
left: 0;
bottom: 0;
width: 100% background: #EEE;
background: rgba(0, 0, 0, 0.3);
text-align: center
}
</style>
</head>
<body>
<div id="current">
<h3>
<u>Current Products</u>
</h3>
<img src="http://www.java2s.com/style/download.png" />
<span class="text">text text text...</span>
<p id="nintext">this is a test</p>
</div>
</body>
</html>
The code above is rendered as follows: