如何使用javascript获得动画字幕覆盖？

我有一张我想制作的图片，当你将鼠标移到图片上时，一个黑色的标题会出现在部分图片上，如下图所示：

---

如果您正在使用jQuery库，请尝试此操作

$("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);
});

---

这应该让你开始：

HTML:

CSS:

---

所以你没有问题，而是一个发展的愿望？如果你真的构建了一些东西，我很乐意解释如何用几个事件监听器重新创建动画。这正是我想要的！这是一个很好的开始。谢谢

<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>

$(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);
    });
});

.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;
}