title: Text and background-color overlay on image
body: <p>I'm trying to create a solid-color overlay that exactly matches the size of an image, and display text on that overlay.  I'd like to do this with HTML and CSS only, if possible.</p>
  
  <p><img src="https://i.stack.imgur.com/ciNMm.jpg" alt="image without overlay"></p>
  
  <p><img src="https://i.stack.imgur.com/b9FBA.jpg" alt="image with overlay and text"></p>
  
  <p>The image may be of any size, and will be sized to fit and centered within its parent container. Something like this (which does not work):</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="img-overlay"&gt;
    &lt;img src="file.jpg"&gt;
    &lt;div class="overlay"&gt;Text will flow...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.img-overlay img {
    margin: 0 auto;
    max-height: 100%;
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
    background-color: rgba(255,255,255,0.5);
  }
  </code></pre>
  
  <p>I thought that HTML5's <code>&lt;figure&gt;</code> tag might help here, but haven't had much success on that front. The following keeps the caption width pegged to the image width, but when I try to remove it from the document flow and position it over the image, it ends up to the left of the image due to the image centering via <code>margin: 0 auto;</code>.</p>
  
  <pre><code>&lt;figure&gt;
    &lt;img src="file.jpg"&gt;
    &lt;figcaption&gt;Text will flow...&lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>