title: Responsive image with text overlay
body: <p>I am trying to make a grid where the images have an overlay on hover, containing text.</p>
  
  <p>However, I can't seem to do this AND have responsive issues.</p>
  
  <p>I've tried removing the fixed heights but this just causes the grids to loose their sizing all together. I have tried tables and absolute positioning without any joy.</p>
  
  <p>Test site is <a href="http://dev.charlyanderson.co.uk/Testing/" rel="nofollow">here.</a></p>
  
  <p>The markup is:</p>
  
  <pre><code>&lt;div class="work-item clickable"&gt;
  
      &lt;a href="http://localhost:8888/work-example-client-name-11/"&gt;&lt;/a&gt;
  
      &lt;div class="front"&gt;
          &lt;img width="460" height="380" src="http://localhost:8888/wp-content/uploads/2016/02/stock-photo-4772348-1500x1000-460x380.jpg" class="attachment-work-featured-image size-work-featured-image" alt="stock-photo-4772348-1500x1000" /&gt;
      &lt;/div&gt;
  
      &lt;div class="back"&gt;
          &lt;div class="inner"&gt;
              &lt;h3&gt;Lorem ipsum dolor sit amet&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>section#homepage .content article .work-item {
      cursor: pointer;
       border-right: 20px solid #fff;
       border-bottom: 20px solid #fff;
       float: left;
       overflow: hidden;
       position: relative;
      width: 33.33%;
  }
  
  section#homepage .content article .work-item .front {
      color: #fff;
      width: 100%;
      z-index: 50;
      opacity: 1;
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
  }
  
  section#homepage .content article .work-item .back {
      display: table;
      width: 100%;
      opacity: 0;
      z-index: 25;
      position: absolute;
  }
  
  section#homepage .content article .work-item .back .inner {
      display: table-cell;
      padding: 20px;
      vertical-align: middle;
  }
  </code></pre>