<style type="text/css">
.bg_a {
position:absolute;
width:156px; height:112px;
background:#fff;
}
.ptitle { width:156px; position:absolute; z-index:9; left:0px; bottom:0px; height:24px; line-height:25px; margin:0 auto; text-align:center; color:#fff; }
.pic {
width: 156px;
height: 112px;
top : 16px;
}
.digest {
width:156px; position:absolute; z-index:9; left:0px;
top:-16px;
height:112px;
display:none; color:#fff;
}
.dig_bg {
width: 156px;
height: 112px;
position: absolute;
z-index:8;
left:0px;
top : -16px;
background-color: #000;
opacity: 0.4;
filter:alpha(Opacity=80);
-moz-opacity:0.5;
display: none;
}
a { text-decoration:none; cursor:pointer; }
.digest { display:none; }
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function run() {
tall.style.display = "block";
pt.style.display = "none";
dig_bg.style.display = "block";
}
function out() {
tall.style.display = "none";
pt.style.display = "block";
dig_bg.style.display = "none";
}
</script>
<div>
<div class="bg_a" οnmοuseοver="run()" οnmοuseοut="out()">
<img class="pic" src="http://img1.cache.netease.com/cnews/2013/5/2/2013050211063877d04.jpg" />
<p id="dig_bg" class="dig_bg"></p>
<p id="tall" class="digest">近日,龚玥菲露巨乳的造型瞬间赢得上海车展众宅男芳心,吴莫愁也前来助阵,一席白色蕾丝曼妙多姿。</p>
<p class="title_bg"></p>
<p id="pt" class="ptitle">吴莫愁齐P透视现车展</p>
</div>
阴影位置的定位,还不完善。但经过我不完善的调整效果是有了。
鼠标移动到图片上显示阴影和图片上的文字