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/