Hallo sobat program, bertemu lagi dengan saya Rizal dan masih diwebsite Dumet School blog berita serta informasi tutorial seputar website. Pada kesempatan kali ini saya akan memberikan hasil experiment atau hasil explore saya dari salah satu fungsi pseudo element pada CSS. Dan dipembahasan  ini saya akan membahas tentang Cara Membuat Gambar Berwarna Ketika Dihover HTML CSS.

Dipembahasan ini saya menggunakan pseudo-element yang disediakan oleh CSS yaitu :not. Untuk penjelasan dari pseudo-element :not akan saya bahas pada pembahasan berikutnya.

Cara Membuat Gambar Berwarna Ketika Dihover HTML CSS

Oke lanjut, saya disini memanfaatkan pseudo-element :not tsb dimana nantinya saya akan membuat sebuah gambar yang tampil pada browser menjadi tidak berwarna atau hitam putih lalu ketika cursor menyentuh salah satu gambar tsb akan berubah menjadi berwarna.

Cara Membuat Gambar Berwarna Ketika Dihover HTML CSS

Langsung saja langkah pertama teman-teman buat foldernya lalu didalam folder tsb buat sebuah folder untuk menampung gambar dan file HTML nya. Untuk contoh foldernya lihat seperti dibawah ini :

Cara Membuat Gambar Berwarna Ketika Dihover HTML CSS

Oke didalam folder images diatas saya sudah meletakan atau mempunyai 7 buah gambar. Lalu ke 7 gambar tersebut saya akan tampilkan pada browser maka kode HTML nya menjadi seperti dibawah ini :

Jika sudah memasukan kode htmlnya diatas, silahkan dijalankan pada browser teman-teman maka hasilnya akan menjadi seperti pada contoh dibawah ini :

Cara Membuat Gambar Berwarna Ketika Dihover HTML CSS

Untuk membuat efek hitam putih atau gambar tersebut tidak berwarna dan ketika di hover menjadi berwarna, maka teman-teman tambahkan kode CSS seperti pada contoh dibawah ini :

Jika sudah, silahkan direfresh kembali halaman websitenya, maka gambar tsb menjadi tidak berwarna dan ketika di hover atau cursor menyentuh gambar maka akan menjadi berwarna. Dan hasilnya akan menjadi seperti pada contoh dibawah ini :

Cara Membuat Gambar Berwarna Ketika Dihover HTML CSS

Oke, sangat mudah ya teman-teman hasil dari percobaan saya tentang Cara Membuat Gambar Berwarna Ketika Dihover HTML CSS. Menggunakan pseudo-element :not CSS.

Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Gambar Berwarna Ketika Dihover HTML CSS. Semoga dapat bermanfaat buat teman-teman dan silahkan explore lagi.

Sampai bertemu dipembahasan selanjutnya.

Terimakasih