title: Responsive overlay over a background image (of a list item)
body: <p>I'm trying to figure out how to create an overlay that mirrors the height and width of the background image on browser resize. </p>
  
  <p>I've found some nifty answers on SO for inline images and situations where a responsive height is unimportant but nothing that responds to both height and width changes of background images.</p>
  
  <p>As always, an example from <a href="http://jsfiddle.net/JLC_x02210/1nucgjdj/4/" rel="nofollow">JSFiddle</a> may be helpful. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="two_boxes"&gt;
      &lt;li class="sun"&gt;
          &lt;div class="overlay"&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="sun"&gt;
          &lt;div class="overlay"&gt;&lt;/div&gt; 
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.two_boxes{
      margin: auto;
      width: 100%;
      max-width: 940px;
      height: 448px;
      padding-top: 0px;   
      position: relative;
  }
  
  .sun{
      background-image: url('sun_banner.jpg');
      background-repeat:no-repeat;
      background-size:100%;
      width: 48%;
      max-width: 458px; 
      height: 100%;
      max-height: 448px;
      display: inline-block; 
  }
  
  .overlay{   
      background:rgba(0,0,0,.75);
      text-align:center;
      width: 100%;
      height: 100%;
      z-index: 100; 
      opacity:0;
      -webkit-transition: opacity .25s ease;
      -moz-transition: opacity .25s ease;
  }
  
  .sun:hover .overlay{
      opacity:1;
  }
  </code></pre>