具体的懒得写，给你个思路吧，当然这写的很粗糙，不能直接用的，按这个思路是可以做到的，
经过显示某层，用onmouseover事件就能实现，
要缓慢上升，用animate()函数控制显示层的定位位置就OK了（或者不用定位用margin-top也行）
思路：
<div style=" height:100pxposition:relativeoverflow:hidden">
<img src="图片" height="100" />
<span id="#div" style=" position:absoluteleft:0bottom:-30pxheight:30px">显示的层</span>
</div>
onmouseover执行下面的animate()函数：
$("#div").animate({bottom:"0px"},5000)
这两天研究了一下，基本上明白这个效果的实现原理了。以下为实现代码，在火狐下能够通过。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New Document </title>
</head>
<style type="text/css">
body {background-image:url(http://www.jhsyh.com/line/img/20101210131221154.jpg)}
#bk {background-color:grayopacity:0width:144pxheight:144pxfloat:left}
#icon {position:relativeleft:-136pxtop:8px}
</style>
<body>
<div id="bk"></div>
<img src="http://d.lanrentuku.com/down/png/1202/red_hearts/red_hearts_09.png" id="icon">
</img>
</body>
<script type="text/javascript">
var bk=document.getElementById("bk")
var icon=document.getElementById("icon")
icon.onmouseover=function(){
bk.style.opacity=0.5
}
icon.onmouseout=function(){
bk.style.opacity=0
}
</script>
</html>
