Bootstrap Tutorial - Hover to add text to image








The following code shows how to hover to add text to image.

Example

<!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>

Click to view the demo