CSS Filtreler İle Resimlere Efekt Verme

Yazılarıma yapılan yorumlar yeni yazı fikirleri için beni besleyen en iyi kaynak. Gelen yorumlarda sorulan soruları daha sonra açıklamak üzere bir yere not alıyorum. Bunlardan biri de resimlerin etrafındaki gölgeyi kaldırmakla ilgili yazdığım yazıya Değmesin Yağlı Boya’nın yaptığı yorumdu. Yorumunda resmin üzerine gelince efekt verilip verilmeyeceğini sormuştu.

Bu yazıda size CSS programlama dilinin filtre özelliğinden bahsedeceğim. CSS’te filtre kodlarını kullanarak resimlere bazı özel efektler verebiliyoruz.

Kodlara geçmeden önce şunu belirteyim, aşağıda verdiğim kodları Şablon > HTML’yi Düzenle dedikten sonra Ctrl+F tuş kombinasyonu yardımıyla kolayca bulabileceğiniz ]]></b:skin> kodunun üstüne ekleyeceksiniz.

1. Resme Siyah-Beyaz Efekti Verme (Üstüne gelince renkli oluyor, normalde siyah beyaz)

.post-body img { 
filter: grayscale(1); 
-webkit-filter: grayscale(1); 
-moz-filter: grayscale(1); 
-o-filter: grayscale(1); 
-ms-filter: grayscale(1); 
}

.post-body img:hover { 
filter: grayscale(0); 
-webkit-filter: grayscale(0); 
-moz-filter: grayscale(0); 
-o-filter: grayscale(0); 
-ms-filter: grayscale(0); 
}

2. Resme Bulanıklık Efekti Verme (Üstüne gelince netleşiyor)

.post-body img { 
filter: blur(5px); 
-webkit-filter: blur(5px); 
-moz-filter: blur(5px); 
-o-filter: blur(5px); 
-ms-filter: blur(5px); 
}

.post-body img:hover { 
filter: blur(0); 
-webkit-filter: blur(0); 
-moz-filter: blur(0); 
-o-filter: blur(0); 
-ms-filter: blur(0); 
}

3. Resme Şeffaflık Efekti Verme (Üstüne gelince netleşiyor)

.post-body img { 
opacity:0.3; 
}

.post-body img:hover { 
opacity:1; 
}

4. Resme Zoom Efekti Verme (Resme gelince yakınlaşıyor)

.post-body img { 
-webkit-transition: all 0.3s ease-in-out; 
-moz-transition: all 0.3s ease-in-out; 
-o-transition: all 0.3s ease-in-out; 
-ms-transition: all 0.3s ease-in-out; 
transition: all 0.3s ease-in-out; 
}

.post-body img:hover { 
-webkit-transform: scale(1.1); 
-moz-transform: scale(1.1); 
-o-transform: scale(1.1); 
transform: scale(1.1); 
}

http://www.yazarkafe.com/icerik/473859/css-filtreler-ile-resimlere-efekt-verme.htm

İpucu: Farkettiyseniz hepsinde .post-body img  ve .post-body img:hover  şeklinde kod var.Bunlarda .post-body img resmin sayfadaki görüntüsünü temsil eder, post-body img:hover  ise üzerine gelinceki görüntüyü temsil eder. Siz tam tersi efekt istiyorsanız bunların altındaki kodları yer değiştirebilirsiniz.