Membuat Image Hover Dengan CSS

Sudah satu minggu lebih saya tidak bisa online karena modem Sierra 881U yang saya gunakan mendadak rusak. Akhirnya belakangan ini saya lebih sering mengoprek localhost sambil mengotak-atik script
Cake PHP untuk sebuah project situs yang sedang saya kerjakan. Saat sedang membuat tampilan situs di localhost, saya jadi teringat salah satu cara membuat Image Hover. Pada postingan kali ini saya akan sedikit berbagi mengenai cara membuat Image hover menggunakan kode CSS untuk memperindah tampilan blog teman-teman.

Fungsi dasar hover adalah untuk merubah tampilan sebuah link pada saat link tersebut disentuh oleh cursor, teman-teman pasti sering melihatnya pada sebuah text link (anchor text), biasanya sebuah text link akan berubah warna pada saat link tersebut tersentuh oleh cursor. Image Hover memiliki fungsi yang sama yaitu merubah gambar pada saat gambar tersebut disentuh oleh cursor. Untuk lebih jelasnya silahkan lihat contohnya dibawah ini:
DEMO:



Biasanya Image hover dibuat dengan menggunakan kode javascript agar perubahan gambar lebih halus, sayangnya terlalu banyak menggunakan javascript pada blog akan membuat loading blog kita menjadi lebih berat. Oleh sebab itu di bawah ini akan saya terangkan bagaimana cara membuat image hover dengan menambahkan sedikit kode CSS pada halaman edit HTML kita.

1. Buka halaman edit HTML blogger
Dashboard >> Layout >> edit HTML


2. Copy code CSS dibawah ini dan paste tepat di atas kode ]]></b:skin> pada halaman edit HTML blogger.
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
3. Klik "Save Template"

Sekarang, untuk menampilkan Image Hover kita memerlukan 2 buah image yang berbeda kemudian memanggil kode CSS tersebut dengan menambahkan class pada HTML image yang kita punya, silahkan lihat contoh kodenya dibawah ini:
<a class="pic" href="LINK YANG DITUJU"><img class="image1" src="URL IMAGE ASLI"/> <img class="image2" src="URL IMAGE HOVER"/></a>
Buat yang terbiasa dengan kode CSS bisa menambahkan beberapa kode CSS pada class image1 dan image2 agar tampilan hover lebih hidup seperti padding margin dan sebagainya, silahkan berkreasi sepuasnya