Backlink

Tukeran Banner 468x60
Home » » Aneka Efek Hover Pada Gambar

Aneka Efek Hover Pada Gambar

Kali ini akan saya jelaskan cara membuat beberapa efek hover pada gambar dengan CSS.

Efek hover tersebut akan terlihat ketika mouse didekatkan pada gambar yang bersangkutan dimana gambar tersebut juga dapat berupa link yang tertuju pada sebuah URL tertentu tetapi bisa juga tanpa link terkait.

Untuk beberapa topik blog/ website, hover pada gambar dapat menjadi keunikan tersendiri sekaligus dapat menambah daya tarik pengunjung jika pemasangannya tidak berlebihan. Efek hover pada gambar seperti itu tentu saja dapat dibuat dengan Javascript tetapi penjelasan kali ini menggunakan CSS, berikut langkah-langkahnya:
  1. Login ke Blogger
  2. Back-up template yang akan diedit untuk jaga-jaga jika terjadi eror
  3. Tempatkan salah satu kode CSS di bawah pada bagian desain HTML, pada Widget, atau pada posting (pilih salah satu saja). Jika ditempatakn di bagian desain HTML, tempatkan tepat di atas kode ]]></b:skin (kode <style type="text/css> dan </style>) pada kode CSS di bawah dihapus. Jika ditempatkan pada widget atau pada posting kedua kode tersebut tetap disertakan.
  4. Salin salah satu kode HTML di bawah sesuai dengna kode CSS yang dipilih pada bagian yang dibutuhkan mislnya pada widget atau pada posting. Jika ditempatkan pada posting, pastikan Anda berada pada mode HTML (bukan mode Compose)
  5. Simpan atau publish, selesai

Contoh hover gambar 1
Kode CSS

Kode HTML

Hasilnya:


Contoh hover gambar 2
Kode CSS

Kode HTML

Hasilnya:


Contoh hover gambar 3
Kose CSS

Kode HTML

Hasilnya:


Contoh hover gambar 4
Kode CSS

Kode HTML

Hasilnya:


Contoh hover gambar 5
Kode CSS

Kode HTML

Hasilnya:


Contoh hover gambar 6
Kode CSS

Kode HTML

Hasilnya:




Catatan
Efek hover gambar tersebut akan bekerja jika menggunakan browser internet terbaru. Selamat mencoba, semoga bermanfaat.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Kangapipwae Blog
Comments
0 Comments

0 komentar :

Posting Komentar

Blogroll

Visitor

Follow On Twitter

Diberdayakan oleh Blogger.

Translate

Blog Archive

Postingan Populer