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 seperti 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 saat disorot mouse. Mungkin ini tidak asing bagi sebagian blogger, tapi ini sesuatu hal yang baru 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 belajar 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 baru pada image. Caranya cukup mudah, bagi yang ingin mencobanya ikuti langkah-langkahnya di bawah ini.

Cari kode yang seperti ini a img, jika belum ada silahkan dibuat saja dan simpan di bawah kode 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 seperti 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 kode yang seperti ini .post img, jika belum ada silahkan dibuat saja dan simpan di bawah kelompok kode .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.

Jadi intinya jika kita niat belajar khusunya belajar kode 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 memberikan pelajaran yang sangat berharga. Kita akan mendapatkan kebanggaan tersendiri setelah apa yang kita coba dan berhasil. Jadi kegiatan blogging kita tidak sia-sia.