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/