title: Overlay absolute positioned, appropriately sized DIV to all blog post images?
body: <p>So I've got a bunch of blog posts, and each post includes an image. With jQuery, I'd like to overlay each of these images with an absolutely positioned div that conforms exactly to the size of the image it's overlaying. How can I go about this?</p>
  
  <p>Every post has an image, and all images would be identical in width but would vary in height.</p>
  
  <p>Here's how my post container is structured:</p>
  
  <pre><code>&lt;section id="featured-posts"&gt;
    &lt;article&gt;
       &lt;img src="post_image.jpg"&gt;
       &lt;h1&gt;Post Headline&lt;/h1&gt;
       &lt;div class="post-description"&gt;&lt;/div&gt;
    &lt;/article&gt;
  
    &lt;article&gt;
       &lt;img src="post_image.jpg"&gt;
       &lt;h1&gt;Post Headline&lt;/h1&gt;
       &lt;div class="post-description"&gt;&lt;/div&gt;
    &lt;/article&gt;
  &lt;/section&gt;
  </code></pre>