title: Pure CSS hover resulting in a color-overlay with text
body: <p>This is my first post on Stack Overflow, but I've been finding answers on here for years. This is one I can't seem to find though. </p>
  
  <p>I'm wondering if there is a way to do the following using only HTML and CSS. </p>
  
  <p>I have a fluid layout, and I want to keep the images fluid. I currently have each image set up to fill their respective divs by using the max-height:100% and max-width:100% properties.</p>
  
  <p>On hover, I would like the image to have a slightly transparent color overlay, and reveal some text and a button. </p>
  
  <p>I'm able to do this if I define the image/div width, but I cannot figure out how to do it while keeping the image so it re-sizes dynamically.</p>
  
  <p><strong><a href="http://jsfiddle.net/polarpanda/HGWPZ/" rel="nofollow">Here's a Fiddle of 4 images in a fluid layout.</a></strong> Any help would be GREATLY appreciated, I feel like I'm overlooking something.</p>
  
  <p>And the code:</p>
  
  <p><code>HTML</code></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div class="span4 red"&gt;
              &lt;img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="span4 blue"&gt;
              &lt;img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="span4 green"&gt;
              &lt;img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="span4 purple"&gt;
              &lt;img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><code>CSS</code></p>
  
  <pre><code>body { margin:0;}
  #container { width:100%; font-size:0;}
  img { max-width:100%; max-height:100%;}
  .span4 { width:25%; display:block;}
  .red { background-color: red; float:left; overflow:hidden;}
  .blue { background-color: blue; float:left; overflow:hidden;}
  .green { background-color: green; float:left; overflow:hidden;}
  .purple { background-color: purple; float:left; overflow:hidden;}
  </code></pre>