Resim Üzerine Gelince Kaydırma Eklentisi

Gönderen : Admin 23 Haziran 2013 Pazar

Bir süredir kullanmakta olduğum ve birçok blogcunun blogunda rastlamış olduğum bir eklentiyi sizinle paylaşıyorum. Gerçekten göze güzel görünüyor, bir takipçim bir süredir paylaşmamı çok istiyordu onun çok isteği üzerine paylaşmak istedim, yalnız css bilgisi olan bu sorunu çabuk halledecektir veya hemen çözecektir isterseniz anlatıma ve kodlara geçelim.

İlk yapmamız gereken şey ise css kodları.

.logo a:link{
transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
}

.logo a:hover{
filter: blur(1.5px);
-moz-filter: blur(1.5px);
-webkit-filter: blur(1.5px);
-o-filter: blur(1.5px);
}

Üsteki kodu blogger veya wordpress panelinizden css bölümüne ekleyin. Daha sonra bunu logomuzu hareketlendirmek için gerekli bazı işlemler geri kalıyor.

Aşağıda 2 örnek göstereceğim size hangisi uygun gelirse onu kullanın.

<img class='logo' src='Logo URL'/>

class='logo' olan yer logomuzu hareket ettirecek html kod. Birde aşağıdaki diğer yöntemi yapabilirsiniz.

<div class='logo'><img src='Logo Url'/></div>

Bir diğer örneğimizde buydu. Yani şu şekilde css kodlarını ekledikten sonra bu 2 koddan kırmızı ile işaretlediğim kodları logonuzun olduğu html kodunun içine veya 2. örnekte verdiğim gibi yapabilirsiniz