Hallo teman-teman, kali ini kita akan belajar membuat hover dengan dua image. Kalian mungkin sudah ada yang tahu apa itu hover. Untuk kalian yang belum tau, hover adalah perintah css untuk memberikan efek perubahan pada suatu objek kita pada saat mouse berada pada objek tersebut. Contohnya yang kalian sering temui pada saat kita akan klik suatu tombol menu diwebsite, sering kali terjadi perubahan warna pada tombol tersebut. Itulah yang dimaksud dengan hover. Perubahanya tidak hanya pada warna saja, melainkan bisa perubahan pada lebar, tinggi, pergerakan , dll.

Pada artikel kali ini kita akan membuat hover dengan 2 buah gambar, jadi pada saat kita hover gambar1, maka akan terjadi transisi menjadi gambar2, seperti itu gambaranya. Agar tidak bingung kalian bisa ikuti contoh code dibawah ini.

image.html

Dan hasil sementara seperti ini.

2

Nantinya kita akan mencoba membuat hover pada gambar tersebut, pada saat gambar yang atas kita hover, maka terjadi perubahan transisi ke gambar yang bawah.

Sekarang kita lanjutkan codenya menjadi seperti ini.

Maka hasilnya akan seperti ini.

3 45

Sekian pembahasan mengenai membuat hover dengan dua image. Semoga bermanfaat.