Cara Membuat Efek Gambar Membesar Ketika di Sorot Mouse

Oke kali ini saya akan membuat efek gambar membesar ketika disorot mouse. Apa itu? Gini nih, jadi, gambar pada blog sobat khususnya gambar pada bagian postingan akan berubah menjadi besar ketika ada mouse lewat diatasnya.

Seperti apa? contoh nya ada pada blog salman  ini gan . Coba saja buka salah satu postingan pada blog ini yang ada gambarnya, kemudian dekatkan mouse di atasnya, pasti tuh gambar akan membesar. 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:]]>

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{-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.

Sampai di sini cara membuat efek gambar membesar ketika disorot mouse sudah selesai, jika kurang jelas atau ada kesalahan, hubungi saya. Sekian semoga bermanfaat.

Keterangan : 1.2 di ganti ke angka lebih besar untuk hasil yang lebih besar.