jquery - 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");
}
);