title: How to position text over an image in a grid
body: <p>I'm struggling with creating a simple grid of images with text overlaid on top. The images are a semantic part of the document and so can't be background images. </p>
  
  <p>Now from looking around online It looks like the way to do this is something like this:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;article&gt;
     &lt;img class="image" src="image.png"/&gt;
     &lt;p class="text"&gt;Text to overlay&lt;/p&gt;
  &lt;/article&gt;
  &lt;article&gt;
     &lt;img class="image" src="image.png"/&gt;
     &lt;p class="text"&gt;Text to overlay&lt;/p&gt;
  &lt;/article&gt;
  &lt;article&gt;
     &lt;img class="image" src="image.png"/&gt;
     &lt;p class="text"&gt;Text to overlay&lt;/p&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>article {
  width: 33.333%;
  position: relative;
  float: left;
  }
  
  .image {
  position: absolute;
  top: 0;
  left: 0;
  }
  
  .text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 0;
  bottom: 0;
  }
  </code></pre>
  
  <p>Here the text doesn't show, and all the images end up on top of each other rather than in a grid.</p>
  
  <p>When I use relative positioning then it works but then it's impossible to position the text at the base of the image. When the browser is resized the text moves around.</p>
  
  <p>I've taken a good look at the following theme, and they seem to manage it using absolute positioning so I'm not sure where I'm getting it all wrong. <a href="https://cubicdemo.wordpress.com/" rel="nofollow">https://cubicdemo.wordpress.com/</a></p>