Membuat Efek Zoom Berputar Pada Gambar di Blog

Demonya

Apa kabar Sobatku semua,,Semoga sobatku Rama, Farixsan, Aby, pokoknya semua dah tanpa terkecuali.. dalam keadaan sehat walafiat & banyak rejekinya hehehe..
Masih tentang CSS lagi yang coba ane share kali ini, Yaitu Menggunakan CSS Ease-Out Untuk Membuat Semua Gambar diblog Otomatis Membesar Bila diSentuh Cursor.
Kalau yang sebelumnya saya juga pernah ngeshare Membuat gambar menjadi besar bila dilalui Cursor namun tidak Otomatis seperti pada Postingan kali ini

Langsung Sobat berikut Langkah2 nya ;

Kodenya

#seocips 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;}
#seocips img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}

Berikut Cara pemasangannya :

Login ke Blog Sobat
Pilih Rancangan Lalu Klik Edit HTML
Letakkan saja Kodenya, diatas kode ]]></b:skin>
Rubah Variabel2nya dan kode2 warnanya biar lebih menarik
Lalu Simpan
Selanjutnya Taruh Kode di bawah ini pada postingan

<div id="seocips">
<div style="text-align: center;">
<a href="http://www.seocips.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixdk3rZKlmOLZhIj8qGSpSyDlXCOp_2unyp027RJ8lkgoylZaCmyK0kScccQXRz4MTkLDS5aOc0vMECJHJErSVfhJN5bmpwfYXACoQcWRWJP-l49HdmVGSaVrtg5sfB8fukOglOQTFLIM/s1600/Seocips-efect-blog.jpg" height="200" width="200" /></a></div>

Ganti yang berwarna Merah dengan gambar sobat

Semoga bermanfaat

✔ Membuat Efek Zoom Berputar Pada Gambar di Blog

Posting Komentar