Question

I’m using this jQuery to expand images on hover:

http://jsfiddle.net/bAHXJ/

Now I’d like to add a div for a caption, using the title, something like this:

$("img").hover(function() {
    $(this).each(function(){
          var title = this.title;
          $(this).after('<div class="caption">'+ title +'</div>');
      }); 
 }); 

When I add that the div appears behind the image:

http://jsfiddle.net/k62NY/

I tried .append instead of .after (still fuzzy on the difference) and nothing appeared.

How do I make the caption div appear below the expanded image, after the image is finished expanding?

Answer 1

I modified your CSS slightly by adding a .caption class and .hover class. I also modified your jQuery a lot to make it more readable (for me, haha, so that I could fix it) :

http://jsfiddle.net/k62NY/4/

Now … I wasn’t trying to make it look AMAZING, as that’s your job. Functionally though, it does as you wish.