Aslında buna güzel bir başlık uyduramadım ancak en mantıklı şekilde bu çıktı. Yapacağımız işlemi WMAraci.com’da Uğur Dalkıran arkadaşım sormuş. Bir resimin üzerine geldiğimizde resim solacak ve resmin ortasında bir arama ikonu görünecek. Olayın mantığı bu ve yapmaya başlayabiliriz artık. Not olarak söyleyeyim konunun altında videolu anlatım mevcuttur, eğer yazılı anlatımı anlamazsanız videoyu inceleyebilirsiniz.

jQuery dosyalarını çağırmayı falan ilk derste anlatmıştım onun için geçiyorum. İlk olarak bir alan oluşturup içerisine resimimizi ve mouse ile üzerine geldiğimizde görünmesini istediğimiz alanı HTML ile yazıyoruz.

Bunlara CSS ile şekil veriyoruz.

img{cursor: pointer;}
#alan {width: 310px; margin: 50px auto; position: relative;}
.hover{display: none; background: url(img/incele.png)no-repeat; width: 26px; height: 26px; position: absolute; top: 90px; left: 140px;}


Geriye işin en güzel kısmı kaldı “jQuery”. Aslında çok basit bir ama bilmek gerekiyor. Ben jQuery derslerinde daha .animate() metoduna gelmedim ancak burada kullandım onun için burayı anlamayan arkadaşlar biraz araştırabilirler.

$("img").hover(function(){
$(this).animate({
"opacity" : "0.3"
});
$(".hover").fadeIn();
},function(){
$(this).animate({
"opacity" : "1"
});
$(".hover").fadeOut();
});


Kodlarda önce resmimizin üzerine geldiğimizde “opacity” sini düşürdük ve .hover classımızı aktif ettik. Ardındanda mouse’umuzu üzerinden çektiğimizde bunların geri eski hala dönmesini sağladık. Mantık sadece bundan ibarek.

Demo: jQuery ile Resme “Soldurma” Efect’i Verme
İndir: jQuery ile Resme “Soldurma” Efect’i Verme dosyaları