Memberi Efek Memutar Pada Image Di Blog

Iseng-iseng sambil dengerin lagu Raisa - Terjebak Nostalgia, saya cari korban untuk mempraktekan efek transisi dengan rotasi. Akhirnya kelopak mata saya tertuju pada gambar yang ada di blog menyerupai gambar di postingan maupun sidebar dan widget.

Karena sebelumnya saya sudah berhasil menerapkan efek opacity pada image di postingan maupun di widget. Kini giliran efek rotasi yang membuat gambar berputar ketika disorot mouse. Mungkin ini tidak abnormal bagi sebagian blogger, tapi ini sesuatu hal yang gres bagi saya dengan membaca tutorial, praktek dan tidak takut gagal.

Sebelumnya saya sudah pernah memposting Belajar Dasar HTML, CSS, dan Javascript secara online, nah di sana-lah sedikit-sedikit saya mencar ilmu koding selama ini ditambah dari membaca postingan blogger-blogger lain.

Balik lagi ke topik masalah, kali ini efek berputar akan berfungsi pada semua gambar yang ada di widget, sidebar, dan postingan tanpa membuat kelas gres pada image. Caranya cukup mudah, bagi yang ingin mencobanya ikuti langkah-langkahnya di bawah ini.

Cari isyarat yang menyerupai ini a img, bila belum ada silahkan dibuat saja dan simpan di bawah isyarat body.

a img{border-width:0;transition:all 400ms ease-in-out}
a img:hover{opacity:.7;transform:rotate(360deg)}

Kira-kira penyimpanannya akan tampak menyerupai ini:

body{............................................}
a:link{............................................}
a:visited{............................................}
a:hover{............................................}
a img{border-width:0;transition:all 400ms ease-in-out}
a img:hover{opacity:.7;transform:rotate(360deg)}

Kemudian cari isyarat yang menyerupai ini .post img, bila belum ada silahkan dibuat saja dan simpan di bawah kelompok isyarat .post

.post img{transition:all 400ms ease-in-out}
.post img:hover{opacity:.7;transform:rotate(360deg)}

Kemudian save template blog Anda dan coba sorotkan mouse pada gambar di blog Anda. Hehehe...sekarang gambar di blog Anda berputar 360 derajat.

Kaprikornus intinya bila kita niat mencar ilmu khusunya mencar ilmu isyarat HTML atau CSS untuk membentuk atau membuat blog dan tidak hanya sekedar blogging, jangan takut untuk mencoba dan mencoba. Kesalahan yang mungkin kita buat akan menunjukkan pelajaran yang sangat berharga. Kita akan menerima pujian tersendiri setelah apa yang kita coba dan berhasil. Kaprikornus acara blogging kita tidak sia-sia.