Posted by Aak
Aak-share.com Updated at: 1:23:00 AM

Cara Membuat Gambar Warna Menjadi Hitam Putih

5 comments:
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!
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

5 comments

Terimakasih banyak gan

Balas

cssnya ditaruh dimana gan??

Balas

css nya letakkan diatas atau sebelum kode

]]></b:skin>

gan

Balas

dengan menggunakan trik ini maka tampilan gambar di blog akan makin menarik tentunya, apalagi kalau di hover dengan warna yang sebenarnya dari gambar tersebut. nice share gan :D

Balas