title: How to show text in image hover
body: <p>I have a few tumbnails that I want to show some text on them in hover.  I could make them dark in hover but do not know how to add text.</p>
  
  <p>example: <a href="http://www.lenzflare.com/video-production-portfolio/" rel="noreferrer">http://www.lenzflare.com/video-production-portfolio/</a></p>
  
  <p>Here is what I have done:</p>
  
  <pre><code>    a {
      display: inline-block;
      overflow: hidden;
      position: relative;
      }
      a:hover .play {
      background:url(http://goo.gl/yJqCOR) no-repeat center    center;
      opacity: 0.8;
      position: absolute;
      width: 200px;
      height: 200px;
      left: 50%;
      top: 50%;
      margin-left: -110px;
      margin-top: -150px;
      }
  
  &lt;a href="/"&gt;
  &lt;div class="play"&gt;&lt;/div&gt;
  &lt;img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" /&gt;
  &lt;br /&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Demo: <a href="http://jsfiddle.net/jmXdh/79/" rel="noreferrer">http://jsfiddle.net/jmXdh/79/</a></p>