Blogger Görüntüleri İçin CSS Hover Efekti Eklemek

Gelişen web dünyasında artık site içinde bulunan efektler oldukça dikkat çekici bir hal almaya başladı. Blog yazarları olarak bizlerde blogumuzda kullandığımız resimlere CSS ile efektler vererek blogumuzu daha dikkat çekici bir hale getirebiliriz. CSS kod yapısı ile bir çok efekti blog yazılarımız için kullanabiliriz.

Hover Efekti Nedir?

En kısa ve basit olarak hover efekti site içinde bulunan bir bağlantı alanının üzerine geldiğinde bu alanın kullanıcıya daha iyi gösterilmesi ve anlaşılması için kullanılan efekttir. Fare belirlediğimiz bu alan üzerine geldiğinde alan üzerinde oluşan vurgu sayesinde kullanıcımıza burada bir bağlantının olduğunu göstermemize yardımcı olur. Hover efekti genellikle CSS ve JavaScript kod yapısı kullanılarak uygulanır.

Hover Efektini Blogger'a Eklemek

Bir çok tasarımcının tasarımlarında kullandıkları ve tavsiye edilen hover efektleri sayesinde kullanıcılarımıza etkili bir blog göstermemiz mümkün olabilir. Blogger resimlerine hover efekti eklemek için yapmamız gereken tek şey aşağıdaki kodları blogumuza uygulamak olacaktır. Kodlarımızı blogumuzda ekleyeceğimiz yer ise; Blogger Kontrol Paneli > Şablon > HTML'yi Düzenle dediğimizde açılan kod sayfasında ]]></b:skin> Kodunu bulup hemen üzerine istediğimiz kodu yapuştırmak olacaktır.

Not: Oluşabilecek bir aksiliğe karşı blogumuzda oluşabilecek hataların önüne geçmek için blogumuzun kod yapısının yedeğini almayı unutmayınız.

Bump Up Efekti

Bu efekt sayesinde oldukça gösterişli bir hover efektine sahip olabilirsiniz. Eğer blogunuzda yatay durumda görseller bulunuyorsa oldukça kullanışlı olabilir. Efekti blogunuza uyguladığınızda fare ile resimlerinizin üzerine gelindiğinde resimlerinizde yukarıya doğru bir hareket oluşur. Bump Up ekeftini blogunuza uygulamak için gerekli kodlar ise;

.post-body img {
    border: 5px solid #ccc;
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
.post-body img:hover {
    margin-top: 2px;
}

Gri Tonlama Efekti

Bu efekt sayesinde blogunuzda bulunan resimler gri tonlarda görünmeye başlar ve fare ile üzerine gelindiğinde resimler kendi renklerine geri dönerler. Efekti blogunuza uygulamak için gerekli kodlar;

.post-body img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 /* Firefox 3.5+ */
    filter: gray;
 /* IE6-9 */
    -webkit-filter: grayscale(100%);
 /* Chrome 19+ & Safari 6+ */;
}
.post-body img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

Blogunuzu daha dikkat çekici ve göze hoş gelen bir yapıya ulaştırmak için yapılabileceklerden bir tanesi hover efekti kullanmaktır. Blogunuzda hover efekti kullanarak okuyucularınıza görsel bir blog sunabilirsiniz.