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;