在悬停时显示文本时使img变暗

Question

我的网站中的一些图像在悬停时需要变暗,同时也需要在悬停之前显示隐藏的文本(文本将显示在变暗图像的顶部).

我已经用这种方式实现了img-darken部分 - http://jsfiddle.net/4Dfpm/.

实现"在悬停(同一悬停)上公开文本"部分的好方法是什么？它只能用CSS完成,或者这次我需要使用脚本吗？

谢谢.

**img-darken部分如何实施:

?

a.darken {
    background: black;
}

a.darken img {
    display: block;
    transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;
}

Answer 1

CSS解决方案

工作在你的jsfiddle和改变jsfiddle是http://jsfiddle.net/4Dfpm/55/

我在<a>标签中添加了<span>,其中class = darken

<span>text</span>

并更新了CSS

a.darken{
...;
position:relative;
...
}

添加了新的CSS

a.darken span{position:absolute;top:5px;color:#000;left:10px}
a.darken:hover span{color:#fff;
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}