18 Ocak 2013 Cuma

CSS Filtre ile resimlere zoom efekti

Bu yazımızda CSS’te filtre kodlarını kullanarak resimlere zoom efekti vereceğiz..
Yazılarıma yapılan yorumlarda, iletişim adresime gelen mesajlarda blogumda kullandığım, resimlerin üzerine gelince zoom efekti isteniyordu..
Bende siz değerli takipçilerimle paylaşmak istedim :)

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.


.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);
}

0 yorum:

Yorum Gönder

 
Ekstralar