Membuat efek zoom otomatis pada gambar
IRVAN EFENDI
Tuesday, September 17, 2013
Membuat efek zoom otomatis pada gambar - Efek ini akan muncul atau bekerja ketika cursor dari pengunjung melakukan hover terhadap gambar2 yang ada di postingan blog anda dan enak nya lagi anda tidak perlu membuat markup tambahan apapun didalam postingan blog karena
Zoom Effect ini akan bekerja secara
otomatis terhadap semua gambar atau foto yang ada dipostingan blog hanya saja ketika pengunjung blog melakukan hover pada gambar tersebut.
Okey,.. sekian dulu penjelasan nya langsung ajah ke
TKP,..
Simak langkah2 dibawah ini:
1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin>
atau </style>
4. Lalu tambahkan kode CSS
berikut ini tepat diatas kode ]]></b:skin>
atau </style>
.post img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 2px 2px 0;
}
.post img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
5.
Simpan template sobat dan lihat hasil nya,..
Semoga Bermanfaat,..
Bermanfaat? Bantu share ya sobat