Cara merubah Gambar Berwarna menjadi Hitam Putih ketika disorot kursor dengan CSS

Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS

Pada postingan kali ini saya akan membagikan/memberitahukan "Bagaimana Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS".

Berikut demonstrasi nya :

1. Simpan Kode dibawah ini tepat di atas kode </head> pada halaman EDIT HTML :

<style type="text/css">
.hitamputih { filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
 -webkit-filter: grayscale(1); /* Google Chrome  Safari 6+ */
 filter: gray; /* IE6-9 */ }
.hitamputih:hover {filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale")}
</style>

2. Berikut contoh untuk memanggil kode CSS di atas :

<img class="hitamputih" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv7mLrvqlmRtkq4OA92RIY55Tk6luNPVq0REuLGDMw4le-hqM_OY2aZwF-CWq8rxZs3rCg2VtTbzkNdDxjup1OWe42UzpxLWK-1zmmXOJuaLg8mnWV77fhzxArwwjjZCtyNPXYphktlsM/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg"/>

# Jika anda ingin membuat semua gambar yang ada di blog anda secara otomatis menjadi hitam putih / (grayscale) dan menjadi berwarna ketika di sentuh!.. silahkan Tempel kode dibawah ini sebelum kode ]]></b:skin> pada Edit HTML : 

.post img, .sidebar img{
 filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
 -webkit-filter: grayscale(1); /* Google Chrome  Safari 6+ */
 filter: gray; /* IE6-9 */
 }

    .post img:hover, .sidebar img:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

Semoga Tutorial Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS ini bermanfaat .. terima kasih !

#jika ada pertanyaan tentang Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS silahkan tinggalkan komentar !