Изменение непрозрачности с помощью jQuery

У меня 9 элементов в сетке, я хочу, чтобы все элементы имели непрозрачность 0,5 для каждого элемента, и только при наведении указателя мыши должны быть div / item и все внутри имеют непрозрачность 1.0.

Вот JS

$('.gallery-single').css({ opacity: 0.5 });

$('.gallery-single a').mouseover(function(){
    $('.gallery-single-title', this).css('display', 'block');
        $('.gallery-single', this).css({ opacity: 1 });
});
$('.gallery-single a').mouseout(function(){
    $('.gallery-single-title', this).css('display', 'none');
        $('.gallery-single', this).css({ opacity: 0.5 });
}); 

HTML

<div class="gallery-single">
<a href="#" title="">
<div class="gallery-single-title hide">Some text goes here</div>
<div class="gallery-single-img"><img src="http://img.youtube.com/vi/code/0.jpg" width="300" height="200" /></div>
</a>
</div>

Все элементы имеют непрозрачность 0,5 при загрузке, но непрозрачность не изменяется при фокусировке. Что я здесь делаю не так?