<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="div1" style="margin-top: 30px;width: 160px;height: 160px;background-color: silver;position:relative; ">
<img src="1_chelen_jak.jpg" style="overflow: hidden">
<div class="box" style="width: 100%;height: 100%;position:absolute;opacity: 0.8;background-color: #002a80; top: 220px">
<p style="color: #fff">功夫不负有心人</p>
</div>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script type="text/javascript">
$('.div1').hover(
function(){
$('.box').animate({'top':0},300);
},
function(){
$('.box').animate({'top': 300},200);
}
);
</script>
</body>
</html>
下了个例子，结果里面内容太多，很多定位,overflow,一下子没明白过来，我一直不知道那个box遮盖层在哪里，原来box自己设置了top自己top到上面或者底下去了，
再加上被一底层固定高度给overflow:hidden;
这个效果 给整个容器定个位position:relitive;
把box遮盖层定个位position:absolute,top:-px;到对象的上面去或者top:px到对象底部看不见的地方
因为box相对容器绝对定位,所以添加hover(function,function)等鼠标移入容器区域的时候，设置box的top为0,就到覆盖了容器
$("容器").animate({'top':0}); animate是动画效果的移动，我之前还以为加了fadein()呢，鹅鹅鹅
鼠标移除的时候把box的top设置大一点的数字，放到对象的上面或者底部看不见的地方就行了
overflow