Question

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?

Every post has an image, and all images would be identical in width but would vary in height.

Here’s how my post container is structured:

<section id="featured-posts">
  <article>
     <img src="post_image.jpg">
     <h1>Post Headline</h1>
     <div class="post-description"></div>
  </article>

  <article>
     <img src="post_image.jpg">
     <h1>Post Headline</h1>
     <div class="post-description"></div>
  </article>
</section>

Answer 1

$('#featured-posts article').each(function(){
    var $cont= $(this).css('position','relative'), $img= $cont.find('img');                                    
    var  pos=$img.position(), w=  $img.width(), h=$img.height();
    var $over=$('<div class="over">').css{ position: 'absolute', top: pos.top, left: pos.left, width: w, height: h, "z-index":10})
    $cont.append( $over);
})

You can obviously move some of the style properties to a css rule and remove the position relative if already absolue or relative