css - CSS 图像翻转文本

Question

我在一个个人网站上工作，我想拥有翻转的图像。对它们进行低不透明度淡入淡出并显示文字）

我在翻转时有褪色的不透明度，但我无法显示文本。

这是我的代码。

HTML

<li class="item i1">
     <a href="#">   
        <span>Vest &pound;18</span>
      </a>
</li><!-- end item -->

CSS

#featured ul li.item {
    height: 200px;
    width: 256px;
    display: inline;
    float: left;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#featured ul li.item a {
    color: #fff;
    width: 256px;
    height: 200px;
    display: block;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
}

#featured ul li.item a:hover {
    background: white;
    opacity: .70;
}

#featured ul li.item a span {
    display: none;
    width: 256px;
    height: 200px;
    font-size: 13px;
    color: red;
}

#featured ul li.item a span:hover {
    display: block;
}

.i1 {
    background: url('../img/1.jpg');
}

我错过了一些非常明显的东西吗？

Answer 1

span:hover不会触发，因为它设置为display:none. 相反，通过以下方式定位跨度a:hover：

#featured ul li.item a:hover span {
    display: block;
}

http://jsfiddle.net/nXxb6/