How to get animating caption overlay with javascript?

I have a picture that I want to make开发者_运维百科 it so that when you mouse over theimage, a black caption comes up over part of it like the one shown here:

http://wonderwall.msn.com/

This should get you started:

http://jsfiddle.net/AlienWebguy/cGQZh/

HTML:

<div class="img_wrapper">
    <img src="http://www.digital-photography-school.com/wp-content/uploads/2007/11/flower.jpg" width="350" height="350" />
    <div class="img_caption">
        This is a flower
    </div>
</div>

JQuery:

$(function(){
    $('.img_wrapper').mouseover(function(){
        $(this).children('.img_caption').animate({
            top:'-50px'
        },300);
    });

    $('.img_wrapper').mouseout(function(){
        $(this).children('.img_caption').animate({
            top:'0px'
        },300);
    });
});

CSS:

.img_wrapper {
    width:350px;
    height:350px;
    overflow:hidden;
    position:relative;
}

.img_caption {
    height:50px;
    width:100%;
    text-align:center;
    opacity:0.7;
    color:#FFF;
    background-color:#000;
    font-weight:bold;
    position:relative;
    z-index:2;
}

Try this if you are using jQuery library

$("imageSelector").append("div", {position:"relative", display:"none"})
.html("The content which you want to show in the div on mouseover")
.mouseover(function(){
   $(this).find("div").animate({ top: -1*$(this).height() }, 500);
})
.mouseout(function(){
   $(this).find("div").animate({ top: 0 }, 500);
});