Skip to main content
KOMPI AJAIB

follow us

Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. Selamat hari raya Idul Fitri, 1 Syawal 1439 H.

×

Memberi Efek Memutar Pada Image Di Blog

Dengan memberikan efek rotasi dengan transisi pada image, semua image di blog kita akan berputar ketika disorot mouse.

Baca juga:

Efek Memutar Pada Image
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.

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar