изменения непрозрачности при наведении курсора мыши с JQuery

Question

Вот jsfiddle моей проблемы: http://jsfiddle.net/bkWaw/

Я пытаюсь получить текст для отображения, когда элемент-наложения колебались, но по какой-то причине непрозрачности не меняется. Что я делаю не так?

Вот код

HTML:

<a href="#"> 
    <div class="item-overlay"> 
     <div class="item-hover">text</div> 
    </div> 
    <img src="http://placehold.it/500x300" /> 
</a> 

CSS:

.item a { display: block; color: #666; font-style: italic; font-weight: bold;} 
.item a:hover { text-decoration: none; } 
.item-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; 
-webkit-transition: all 0.2s ease-in-out; 
-moz-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; 
transition: all 0.2s ease-in-out; 
} 
.item-overlay:hover { background-color: rgba(233, 115, 149,0.8);} 
.item-hover { color: white; z-index: 999; position: absolute; opacity: 0; width: 100px; height: 100px;} 

JS:

$('.item-overlay').hover(
function() { 
    $(this).find('item-hover').css("opacity","1"); 
}, 
function() { 
    $(this).find('item-hover').css("opacity","0"); 
} 
); 

Answer 1

DEMO

Использование . для КЛАССА

$(this).find('.item-hover').css("opacity","1"); 

P.S. в jsFiddle вы не установили библиотеку jQuery, и то, что вы хотите, выполнимо в чистом CSS, но я думаю, вы знаете, что, как только вы используете переходы ...