Cara Membuat Efek Gambar Membesar Dan Berputar Ketika disorot Mouse

Kali ini saya akan share lagi tentang cara membuat efek gambar membesar dan berputar ketika disorot mouse. Apakah itu? Gini nih, jadi, gambar pada blog sobat khususnya gambar pada bagian postingan akan berubah menjadi besar dan berputar ketika pointer mouse tepat diatasnya.

Seperti apakah? contoh nya ada seperti dibawah ini. Coba saja sorot gambar yang ada dibawah.

Gimana! gambarnya membesar kan..! Okey... Begitulah kira-kira penjelasan singkatnya.

Cara membuatnya seperti ini :

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.

.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{-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}

6. Simpan template. Lihat perubahannya apakah sudah berubah atau belum.

Sampai di sini cara membuat efek gambar membesar dan berputar ketika disorot mouse sudah selesai, jika kurang jelas atau ada kesalahan, sampaikan komentar. Sekian semoga bermanfaat.
thanks..

sumber