En Güncel Haberler İçin Hemen Abone Ol

Etiketler

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

CSS Dersleri

Dikkat! Suç teşkil edecek, yasadışı, tehditkar, rahatsız edici, hakaret ve küfür içeren, aşağılayıcı, küçük düşürücü, kaba, pornografik, ahlaka aykırı, kişilik haklarına zarar verici ya da benzeri niteliklerde içeriklerden doğan her türlü mali, hukuki, cezai, idari sorumluluk içeriği gönderen Üye/Üyeler’e aittir.

Anasayfa » CSS Dersleri » CSS Filtre İle Resimlere Zoom Efekti

CSS Filtre İle Resimlere Zoom Efekti

kategori CSS Dersleri - tarih 06:34 - yorum yok

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