Membuat Efek Hover Gambar Berputar dengan CSS

Holaa!! Kita berjumpa lagi para sidang pembaca yang super :D Kali ini saya mau berbagi trik yang jarang di share nih, yaitu efek rotasi saat hover (objek di sorot dengan mouse). Efek ini sebenarnya sederhana tapi akan terlihat amazing jika digunakan dengan tepat, apalagi jarang yang memakai efek ini, jadi bakal terlihat beda dari yang lain. Bukankah yang beda itu yang dicari? Bisa Anda gunakan untuk mempercantik widget atau objek apapun. Untuk demo bisa Anda lihat sendiri pada icon sosial media di pojok kanan atas blog kelincex.com kita yang tercinta, hehe.

Oke, untuk membuatnya ikuti langkah-langkah berikut!

Step 1. Masuk ke Blog Anda, masuk ke opsi Template » Edit HTML.

Step 2. Salin dan paste kode berikut dibagian CSS (diatas kode ]]></b:skin>).

#alembanaicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#alembanaicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

360 adalah objek tersebut berputar 360 derajat, jika anda ingin objek berputar beberapa derajat saja maka Anda bisa mengganti angka 360 sesuai keinginan Anda.

Step 3. Simpan Template.

CARA PEMAKAIAN
Gunakan pada Tab HTML, ingat Tab HTML. Bisa pada Tab HTML di Template atau Cara paling mudah Add a Gadget » HTML/JavaScript atau dimanapun terserah Anda sajalah. Dengan format penulisan seperti ini setiap kali Anda ingin memakainya:

<div id="alembanaicons">Simpan disini apapun terserah anda</div>

Contoh:

<div id="alembanaicons"><a href="https://www.facebook.com/pages/alembanas-site/531712690273408" style="text-decoration: none;" target="_blank" title="Like Me"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0HvRI5XPmJMDlpIGeUrASDUo38sn5IGvwpZBhJzXVGhQe-C0NZa9g-OYE4mn3ttd5qk5VxAELyWiAreeHn9QmNh2vgPzzMoJQDteNxfuDxtOI10Qx1llWAJ9kAhpkzZJZ-Q_eoI9CsFO/s1600/facebook-icon.png" /></a> <a href="https://plus.google.com/110432922056552488435" style="text-decoration: none;" target="_blank" title="Add Circle"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2TXJFVA6zsDSG1T5a7LPcZhjKkxi2UcNtkoH8UbAVzxlpWnfgr3tbc03qqwOn5xdrYZnPOzWjltd3GZfztIrwownN67qDuomj1LjmahyphenhyphenQ37-QeYsv3-qf_Uk0bJqvBpfXcg3R6DWD9xZS/s1600/gplusicon-25x25.png" /></a> <a href="https://twitter.com/Alembana" style="text-decoration: none;" target="_blank" title="Follow Me"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiy2MQ-ax36nbOYaro87-JzhAI_Qd6GgwlM9Q10lFD3edhjZhyphenhyphen0UL-dqeka2v7KMqQEHgT_MEJW71vRVBC9Mv9Be5x46MlN7YDDWpwQ-aJxuatHJV1qiXg6ewiWiFHF9Mzj_4v7fC9VVRG/s1600/icon-twitter.png" /></a> <a href="http://feeds.feedburner.com/alembanasite" style="text-decoration: none;" target="_blank" title="Get Update"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqM7-h_SYTwiQ4iqWzdP0RSFnN2fKjkhFjVX2f_tlEZ8KNUCAvVNfcSOpDW6E77b8hiby-N4QN8AVypxjw4QxdrlsipMVu9D5ttySDA5g8nZ2ysQP-0UlssDV53df493tY8VekNvUJ9hfL/s1600/rss-icon.png" /></a></div>

Maka hasilnya akan jadi seperti ini (coba disorot):

Sekian dulu artikel dari saya, maaf kalau agak acak-acakan karena seperti biasa saya menulis artikel dengan curi-curi waktu kerja. Jadi harus waspada kalau-kalau ada atasan -_-

Semoga Bermanfaat, Amin ;)