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/