title: Bootstrap 3: Text overlay on image
body: <p>I am using bootstrap 3 thumbnail as follows:</p>
  
  <pre><code>&lt;div class="thumbnail"&gt;
      &lt;img src="/img/robot.jpg" alt="..." /&gt;
      &lt;div class="caption post-content"&gt;
          &lt;h3&gt;Robots!&lt;/h3&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the <code>caption</code> to overlay on image but the way being done on <a href="http://mashable.com/" rel="nofollow noreferrer">Mashable.com</a></p>
  
  <p>I have tried following but no luck :((</p>
  
  <pre><code>.post-content {
      background: none repeat scroll 0 0 #FFFFFF;
      opacity: 0.5;
      margin: -54px 20px 12px; 
      position: relative;
  }
  </code></pre>
  
  <p>How can I overlay a <code>caption</code> div on top of the image but just like (Mashable.com)?</p>
  
  <p>This works but I want it centered just like Mashable. and centered for every image. for some images, it is not centered.</p>