Add caption div to image after expanding on rollover with jQuery

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(f开发者_开发问答unction() {
    $(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?

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.

Your images are positioned using absolute. So the div appears behind the image. If you want it to appear in front you will need to make a CSS change. Let me see if I can get a fiddle with what you want.

Your jquery is bad: change

var title = this.alt; 

to

var title = $(this).alt;