Membuat Efek Gambar Membesar Ketika disorot Mouse

Hallo sobat sevenhsa... kali ini saya ingin berbagi tips, bagaimana kita akan mencoba membuat efek gambar pada postingan blig kita membesar jika disentuh oleh cursor mouse. Bahasa kerennya "How we will make zooming effect in our blog post".
Untuk sample / contohnya sobat bisa mendekatkan kursor mouse sobat di atas sample image diatas.

Langsung saja kita praktekan.

1. Untuk membuat efek gambar membesar ketika disorot mouse, pertama login dulu ke akun blogger milik sobat.
2. Terus klik menu Rancangan » Edit HTML.
3. Download dulu template sobat biar aman dan biar kalau terjadi error ada cadangan templatenya.
4. Kemudian cari kode berikut ]]></b:skin>
5. Kalau sudah ketemu, letakkan kode berikut tepat di atasnya.
6.  
.post .post-body img{margin:5px; padding:5px; border:1px solid #e0e0e0; -o-transition: all 0.5s; -moz-transition:all 0.5s; -webkit-transition: all 0.5s;} .post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}




 Simpan template. Lihat perubahannya apakah sudah berubah atau belum.

Selamat mencoba dan semoga artikel ini bisa bermanfaat bagi sobat sevenhsa.

Posted in: Blog, Tips