title: Overflow broken on responsive thumbnails with h1 overlay
body: <p>I'm trying to get my thumbnails to span 50% of their containing DIV, with the height being automatic, and a h1 header on top. Right now the h1 header is determining the height of the containing DIV, so the full thumbnail image is not viewable unless you scroll down (scrollbars are not desired). Any help is greatly appreciated. Thanks!</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;div id="content"&gt;
    &lt;div class="featured"&gt;
      &lt;a href="#"&gt;&lt;img src="images/featured1.jpg" /&gt;&lt;/a&gt;
      &lt;h1&gt;&lt;a href="#"&gt;Content for  class "featured" Goes Here&lt;/a&gt;&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="featured"&gt;
      &lt;a href="#"&gt;&lt;img src="images/featured2.jpg" /&gt;&lt;/a&gt;
      &lt;h1&gt;&lt;a href="#"&gt;Content for  class "featured" Goes Here&lt;/a&gt;&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>#content {
      overflow: auto;
      position: relative;
  }
  .featured {
      float: left;
      width: 50%;
      height: auto;
      padding: 0;
      text-align: center;
      vertical-align:middle;
      position: relative;
      overflow: auto;
  }
  .featured img {
      width: 100%;
      height: auto;
  }
  .featured h1 {
      color: #CCC;
      font-size: 32px;
      letter-spacing: 0.1em;
      display:block;
      position:relative;
      z-index:3;
      text-align: center;
      vertical-align: middle;
  }
  .featured&gt;a{
      position:absolute; top:0; left:0; z-index:0;
  }
  #content .featured:not(:hover) img {
      -webkit-filter: brightness(0.2);
      -moz-filter: brightness(0.2);
      -ms-filter: brightness(0.2);
      -o-filter: brightness(0.2);
      filter: brightness(0.2);
  }
  #content .featured:hover img {
      -webkit-transition:all .4s;
      -moz-transition:all .4s;
      -ms-transition:all .4s;
      -o-transition:all .4s;
      transition:all .4s;
  }
  </code></pre>
  
  <p>How my thumbnails look now:
  <a href="https://i.stack.imgur.com/vW8yL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vW8yL.jpg" alt="problem"></a></p>
  
  <p>And how I want my thumbnails to look:
  <a href="https://i.stack.imgur.com/IqOqw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IqOqw.jpg" alt="desired outcome"></a></p>