Membuat efek zoom otomatis pada gambar ~ blog sepot

Membuat efek zoom otomatis pada gambar

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 langkah² 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,..

Terima kasih telah membaca artikel tentang Membuat efek zoom otomatis pada gambar di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.