append span to hover

Question

Как я могу добавить свой диапазон для выполнения моего перехода на hover. Я пытаюсь получить текст из диапазона также исчезают как изображение, когда есть MouseOver

#grid li span { 
    color: white; 
    display:block; 
    bottom:250px; 
    position:relative; 
    width:180px; 
    } 

#grid li { 
float: left; 
margin: 0 40px 75px 0px; 
display:inline; 
position:relative; 
    } 

#grid li a:hover img { 
    -webkit-transition: opacity .3s ease-in; 
    -moz-transition: opactiy .3s ease-in; 
    -ms-transition: opacity .3s ease-in; 
    -o-transition: opacity .3s ease-in; 
    transition: opacity .3s ease-in; 
    opacity: 1; 
    } 

#grid:hover img { 
-webkit-transition: opacity .3s ease-in; 
-moz-transition: opactiy .3s ease-in; 
-ms-transition: opacity .3s ease-in; 
-o-transition: opacity .3s ease-in; 
transition: opacity .3s ease-in; 
zoom: 1; 
filter: alpha(opacity=100); 
opacity: 0.3; 
    } 

jsfiddle

Answer 1

Изменить ваш CSS поэтому все li увядает. Затем установите таргетинг на ту, которая зависнет.

http://jsfiddle.net/XYZZx/13/

Изменить

#grid:hover img { 
    ...transitions... 
} 

в

#grid:hover li { 
    ...transitions... 
} 

и добавить

#grid:hover li:hover { 
    opacity: 1; 
}