title: Overlay a div to the dimensions of an image
body: <p>This is a slightly fiddly question- essentially, I am making a grid of images where a coloured overlay (div) is displayed upon rollover, with a bit of text within that div. This is very similar to this website- <a href="http://twoarmsinc.com/work/category/all" rel="nofollow">http://twoarmsinc.com/work/category/all</a>. To do this with a div instead instead of an image would be easy- you would nest the overlay inside the other div and set width and height to 100%. However, since you can't nest within an image, and the image is responsively changing size, how should I go about this? I'm not sure background-image will work because I am using a responsive grid system (Simple Grid).</p>
  
  <p>Here's a CodePen: <a href="http://codepen.io/anon/pen/iIsGm/" rel="nofollow">http://codepen.io/anon/pen/iIsGm/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div&gt;
     &lt;div class='overlay'&gt;&lt;/div&gt;
     &lt;img src="http://placekitten.com/300/200" alt="thumb"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.overlay{
  width:100%;
  height:100%;
  background:#333;
  position:relative;
  z-index:10;
  }
  </code></pre>
  
  <p>Apologies for the ambiguity- any and all help is greatly appreciated!</p>