Sorot gambar berikut untuk membuat gambar warna menjadi hitam putih

Agar gambar memiliki efek seperti diatas, berikut panduannya
.image-box {width:100%;text-align:center}
.image-hover {position:relative;display:inline-block;overflow:hidden;}
.image-hover a {text-decoration:none}
.image-hover img {margin:10px}
.img-color-blackwhite img{transition:all 0.6s ease-in-out;-webkit-transition:all 0.6s ease-in-out;-moz-transition:all 0.6s ease-in-out;-ms-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;}
.img-color-blackwhite:hover img{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:url(greyscale.svg#greyscale);filter:gray;}
Untuk menerapkan kode css efek gambar warna menjadi hitam putih, maka diperlukan kode HTML agar bisa menampilkan efek yang diinginkan. Silahkan salin kode HTML berikut ini, terserah mau diletakkan dimana..
<div class="image-hover img-color-blackwhite">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRg9MQa_vXmYMkwziCs70Iw4m7C7ZekqLX0ZN_jl5B83otzq9So_5LXPvSfxJOCJIqN0TkSQYIk9APyjNBQOT8xxDt9j1gtKd0z-qpRK23oZet8bhS72yBodmJc6Zi0WGRO6_A66cP-fs/s1600/efek-gambar-membesar-zoom-in.png" />
</div>
Catatan: Ganti url gambar sesuai keinginan sobat
Mudah bukan? Nantikan efek gambar lainnya yang akan saya bagikan juga dan tentunya tetap mengutak-atik kode CSS diatas. Okey, semoga artikel Efek Membuat Gambar Warna Menjadi Hitam Putih ini bermanfaat
Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@