The following code shows how to hover to add text to image.
<!DOCTYPE html>
<html>
<head>
<link
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"
rel="stylesheet">
<style type='text/css'>
.thumbnails li {<!-- w w w . ja v a 2s . co m-->
position: relative;
overflow: hidden;
}
.thumbnail a p {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(255, 0, 0, .4);
text-align: center;
opacity: 0;
}
.thumbnail a:hover p {
opacity: 1;
background-image:url('http://placehold.it/300x300');
background-position: center center;
background-repeat: no-repeat;
}
.thumbnail a:hover p span {
position: absolute;
top: 60%;
margin-left: -40px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<ul class="thumbnails">
<!-- List start -->
<li class="span3">
<div class="thumbnail">
<a href="#">
<img src="http://www.placehold.it/300x200" />
<p>
<span>hover content</span>
</p>
</a>
</div>
</li>
</ul>
</div>
</body>
</html>