Cara Membuat Gambar Berputar Dan Membesar Saat Disorot Mouse

Cara Mempercantik Blog Dengan Gambar Animasi

Cara Membuat Gambar Berputar Dan Membesar Saat Disorot Mouse - Sebuah Gambar akan Berputar Dan Membesar Pada Saat Pointer Mouse berada pada area Gambar tersebut. sehingga akan menimbulkan efek yang cukup menarik pada gambar tersebut. Untuk lebih jelasnya sahabat bisa melihat contoh yang telah sundaboy buat dibawah ini :

Nah sekarang apabila sahabat tertarik untuk Membuat Gambar Berputar Dan Membesar Saat Disorot Mouse, silahkan lakukan langkah langkah berikut ini :

1. Login terlebih dahulu ke Blogger

2. Selanjutnya Pilih Rancangan

3. Pilih Edit HTML

4. Cari kode </head>

5. Copy kode dibawah ini dan letakan tepat diatas 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>

6. Setelah itu Simpan template

Selanjutnya untuk bisa menampilkan Gambar Berputar Dan Membesar Saat Disorot Mouse, sahabat copy kode dibawah ini pada halaman posting maupun sidebar blog.

<div id="sundaboy">

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

Keterangan :

• http://ngeblogbarengbareng.blogspot.com/ Ganti dengan Url yang dituju pada saat gambar diklick
• KODE GAMBAR Ganti dengan Url Gambar milik sahabat

Nah gimana, mudah bukan Cara Membuat Gambar Berputar Dan Membesar Saat Disorot Mouse, apabila sahabat mengerti dengan kode HTML atau CSS sahabat bisa menambahkan sentuhan lain pada kode diatas.