CSS和JQ两种方式实现图片层上显示文字

先看效果





HTML 代码：

<div id="outer" class="outer" style="background: url(IMG/thumb.jpg)">
<a href="#" class="now"><span>电 影 钢 的 琴</span> </a>
</div>

第一种（纯css代码实现），缺陷：不可以控制显示速度，--speed

.outer
{
height: 280px;
width: 500px;
margin: 0px auto;
position: relative;
}
.outer a
{
display: none;
text-decoration: none;
}
.outer:hover
{
cursor: pointer;
}
.outer:hover a.now
{
display: block;
}
.outer:hover a
{
display: block;
position: absolute;
bottom: 0;
left: 0;
text-decoration:none;
color:White;
font-weight:bolder;
z-index: 10;
width: 100%;
height: 9%;
line-height: 27px;
background:gray;
text-align: center;
}

第二种（jq方式实现）可以控制speed，效果较好

html代码：

<div id="outer" class="outer" style="background: url(IMG/thumb.jpg)">
<a href="#" class="secondWayCSS"><span>电影钢的琴</span> </a>
</div>

css代码：

.outer
{
height: 280px;
width: 500px;
margin: 0px auto;
position: relative;
}
.outer:hover
{
cursor:pointer;
}

.secondWayCSS
{
display: none;
position: absolute;
bottom: 0;
left: 0;
color: red;
z-index: 10;
width: 100%;
height: 9%;
line-height: 27px;
background:gray;
text-align: center;
}

jq代码：

$(function () {
$("#outer").hover(function () {
$(this).find("a").slideDown("normal");
}, function () {
$(this).find("a").slideUp("normal");
})
//实现的方式二；更简单的呀；
$("#outer").hover(function () {
$(this).find("a").slideToggle(300);
})
})