Cara membuat gambar bergerak dan membesar pada saat di sentuh kursor

Cara membuat gambar bergerak dan membesar pada saat di sentuh kursor - Asalamualaikum sobat-sobat setelah beberapa hari tidak menuliskan postingan tentang tutorial dan tips blog kali ini saya akan menuliskannya untuk sobat-sobat sekalian. hehe. pernahkah sobat-sobat mengunjungi sebuah blog dan di temukan sebuah gambar yang apabila di sentuh kursor akan membesar atau memutar. jujur kalo saya pernah menemuinya. mungkin sobat-sobat ada yang bertanya-tanya gimana sih untuk membuatnya ?? tenang-tenang sobat-sobat dengan membaca postingan ini insyallah sobat-sobat akan bisa.

untuk biar meyakinkan sobat-sobat bahwa tutorial ini berkerja coba arahkan kursor sobat-sobat ke gambar di bawah ini ..

Gimana sobat-sobat keren kan ?? hehe tentunya :)

jika sobat-sobat ingin membuatnya silahkan ya ikuti cara-cara di bawah ini, hehe

1. Login terlebih dahulu ke blogger

2. Jika sudah kemudian pilih Template > Edit Html

3. Jika sudah kemudian cari kode </head> jika sudah ketemu copylah kode di bawah ini tepat di atas kode </head>

<style>#sundaboy img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;} #sundaboy img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

4. jika sudah untuk agar berkerja jika di sentuh kursor ikuti format penulisannya seperti di bawah ini..

<div id="sundaboy">
<a href="http://novanpeace.blogspot.com/"><img src="KODE GAMBAR" /></a></div>

Keterangan : untuk tulisan yang berwarna merah bisa di ganti alamat link yang sobat-sobat inginkan dan untuk yang tulisan berwarna biru ganti dengan url dari gambar sobat-sobat.