Jquery'de karşılaştığım basit bir hata

Merhaba arkadaşlar bir portfolyo teması kodluyorum şu anda index sayfasında amacım şöyle.Sadece öne çıkarılmış görseller gözüküyor görsellerin üzerine gelince görsel grileşiyor ve konu başlığı gözüküyor.Ancak benim kullandığım kod da başlığı gösteremiyorum.Kodlarımı aşağıda veriyorum. ", this" değerini kaldırınca resimlerin üzerine gelince başlıklar gözüküyor fakat hepsinin ki aynı anda gözüküyor... :(

$(document).ready(function(){
$("article a img").hover(function(){
$(".yazibasligi" , this).show();
$(this).animate({
opacity : 0.50
});
},function(){
$(this).animate({
opacity : 100
});
$(".yazibasligi").hide();
});
$(".sosyal a img").hover(function(){
$(this).animate({
opacity : 0.50
});
},function(){
$(this).animate({
opacity : 100
});
});
});

".yazibasligi", "article a" içinde ise aşağıdaki gibi kullanabilirsin.
$(document).ready(function(){
$("article a").hover(function(){
$(this).find(".yazibasligi").show();
$(this).find('img').animate({
opacity : 0.50
});
},function(){
$(this).find('img').animate({
opacity : 100
});
$(this).find(".yazibasligi").hide();
});
});

burda animate yerine fadeto kullanmanız daha kullanışlı olur.