如何在图像悬停中显示文本

Question

我有一些缩略图，我想在悬停时在它们上显示一些文本。我可以在悬停时使它们变暗，但不知道如何添加文本。

示例：http : //www.lenzflare.com/video-production-portfolio/

这是我所做的：

    a {
    display: inline-block;
    overflow: hidden;
    position: relative;
    }
    a:hover .play {
    background:url(http://goo.gl/yJqCOR) no-repeat center    center;
    opacity: 0.8;
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-left: -110px;
    margin-top: -150px;
    }

<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
</a>

演示：http : //jsfiddle.net/jmXdh/79/

Answer 1

向play元素添加一些文本内容。

<div class="play">Some text</div>

添加了 .play 的 css：

color:#fff;
font-size:16px;