Efek gambar grayscale dengan css
Beberapa waktu lalu saya pernah tulis tutorial tentang Membuat efek gambar dengan css, yang membahas tentang bagaimana caranya menambahkan efek glow, berputar, dan transparan. Pada tutorial kali ini saya akan berbagi tentang bagaimana membuat efek gambar grayscale atau hitam putih dengan css.
Untuk membuat gambar grayscale/hitam putih sebenarnya sangat mudah kita bisa lakukan dengan mengedit gambarnya dengan aplikasi grafis. Tapi seandainya medianya web/blog dan gambarnya banyak tentunya akan sedikit merepotkan karena harus mengeditnya satu persatu. Oleh karena itu kita perlu metode yang lebih sederhana dan praktis bisa mengubah semuanya saat ditampilkan. Caranya yaitu dengan css. Saya sudah coba metode ini pada beberapa browser (Firefox, Chrome dan IE) dan semuanya bisa berjalan normal.
Lihat gambar berwarna berikut :
Lihat hasil perubahannya berikut :
Gambar diatas adalah gambar yang sama dengan sebelumnya tapi ditambahkan perintah css untuk mengubahnya menjadi grayscale/hitam putih. Coba arahkan korsur mouse anda melewati gambarnya, maka gambar bisa dikembalikan ke warna aslinya.
Caranya :
Tambahkan gambar dengan kode seperti berikut :
<div class="contoh-efek"> <img src="nama-file-gambar.jpg" /> </div>
Perintah div difungsikan untuk memperkecil ruang kerja efek sehingga yang berubah warna hanya gambar yang berada dalam area div itu saja.
Kemudian sisipkan css berikut pada bagian <head>
<style type="text/css">
.contoh-efek img
{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://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");
filter: gray;
-webkit-filter: grayscale(100%);
}
.contoh-efek img:hover
{
filter:none;
-webkit-filter:grayscale(0%);
}
</style>
Dengan kode diatas kita mengaktifkan efek hitam putih hanya pada gambar yang berada dalam class contoh-efek, dan mengembalikan warnanya pada saat korsur melalui gambarnya.
Semoga bermanfaat dan menambah inspirasi anda. Selamat mencoba.
Zainal Hakim
** Bebas disunting dengan menyebutkan sumber **
