Efek Membuat Gambar Warna Menjadi Hitam Putih

Efek Membuat Gambar Warna Menjadi Hitam Putih - Beberapa hari yang lalu saya pernah membahas tentang efek gambar membesar kedalam atau zoom in dan dengan artikel yang sama, maka pembahasan pada artikel ini membahas tentang efek gambar warna menjadi hitam putih. Pada artikel sebelumnya saya telah memberikan sedikit panduan agar mencoba mengedit kode CSS yang ada pada efek gambar tersebut agar menghasilkan efek gambar yang lainnya, atau seperti yang ditampilkan pada gambar berikut ini

Sorot gambar berikut untuk membuat gambar warna menjadi hitam putih

Agar gambar memiliki efek seperti diatas, berikut panduannya

CSS

.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;}

HTML
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="http://1.bp.blogspot.com/-t5j4QjJaDWc/Uqb3nxjGHbI/AAAAAAAAB-k/iCreVbyGCd4/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