Cara Membuat Gambar Warna Menjadi Hitam Putih

Cara Membuat Gambar Warna Menjadi Hitam Putih - CSS dapat menghasilkan berbagai keindahan pada sebuah Blog, CSS banyak menciptakan berbagai efek yang menarik seperti contohnya silahkan Anda hover gambar dibawah ini :

Setelah Anda menghover-nya efek yang ditimbulkan adalah perubahan background pada gambar menjadi hitam putih, bagaimana melakuaknnya berikut ini langkah-langkahnya :

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

Berikut ini kode pemanggil untuk menciptakan efek gambar hitam putih, silahkan anda salin dan terapkan pada Template Anda.

HTML

<div class="image-hover img-color-blackwhite">
<img src="URL Gambar" />
</div>

Selamat mencoba!

Subscribe to receive free email updates: