The following code shows how to change opacity when hover.
<!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 {<!--from www .java 2 s .c o 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;
}
</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>
<!-- Hover content -->
<span>Hover Content</span>
</p>
</a>
</div>
</li>
</ul>
</div>
</body>
</html>