Resimlere CSS Filtreler ile Efekt Verme

00:53 | 0 yorum

Resimlere CSS Filtreler ile Efekt Verme

Bazı bloglarda gördüğüm CSS resim efektleri dikkatimi çekmişti. Buna benzer bir araştırma yaparak 4 adet CSS resim efekti bulabildim. Daha önce css konularımda resimlerin etrafındaki çerçeveyi kaldırmak ve resimlere ovallik kazandırmaktan bahsetmiştim. 

Bugün CSS ile resimlerinize ne tür efektler verilir ondan bahsedeceğim. Uygulaması ve kullanılması basit bir yöntem. 

Paylaşacağım efekt kodlarını Şablon > HTML'yi Düzenle dedikten sonra ]></b:skin> kodunun üzerine ekleyeceksiniz. 

1. Resme Siyah-Beyaz Efekti Verme

.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

.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
.post-body img { 
opacity:0.3; 
}
.post-body img:hover { 
opacity:1; 
}
4. Resme Zoom Efekti Verme
.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); 
}
!!! ÖNEMLİ !!!
Kod içerisinde .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.

Şimdilik bu kadar, herkese kolay gelsin iyi bloglamalar...

Kategori: , ,

0 yorum