Efek gambar grayscale dengan css

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 :

contoh efek gambar

Lihat hasil perubahannya berikut :

contoh efek gambar

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 **

Artikel Lainnya

  • Membuat tampilan layout 3 kolom dengan css
    Membuat layout halaman web dengan css sangatlah mudah dan tidak menggunakan perintah yang rumit. Pada artikel singkat berikut ini saya akan menjelaskan bagaiman cara membuat tampilan halaman web dengan susunan tiga kolom. Contoh yang saya buat sengaja dirancang sederhana agar dapat digunakan untuk berbagai keperluan. Lihat kode berikut ini :
  • Perbedaan html dengan css
    Dalam bidang desain web, HTML dan CSS dianggap sebagai sesuatu yang wajib digunakan dalam menyusun sebuah halaman web/blog. Hal itu sangatlah wajar karena perpaduan keduanya mampu menciptakan sebuah tampilan menarik, disukai mesin pencari, optimal dari segi kecepatan. Tapi apakah mereka bisa dipisahkan? seperti apa jika itu dilakukan? Apa perbedaan html dan css? Artikel berikut ini akan membantu anda membedakan HTML dengn CSS dari segi fungsi serta penulisan.
  • Membuat header tetap diatas halaman
    Banyak variasi tampilan header atau footer yang digunakan untuk menghiasi halaman web dan dapat kita temukan diinternet, mulai dari yang sekedar tulisan judul, gambar logo sampai dengan model otomatis muncul dan hilang. Pada tulisan berikut ini, saya akan berbagi trick cara membuat header dan footer yang tetap diatas dan dibawah bagian halaman.
  • Referensi warna untuk HTML dan CSS
    Warna yang terlihat disebuah website/blog sangatlah bervariasi dan memiliki daya tarik tersendiri terhadap pengunjung, pingin tau lengkap referensi warna untuk HTML maupun CSS, silahkan baca panduan berikut.
  • Mengatur gambar dengan css
    CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam kode html baik itu tulisan, tabel dan gambar maupun objek lainya. Kali ini saya akan berbagi cara mengatur gambar dengan css agar dapat disajikan lebih hemat tempat dan hemat kode dan tentunya menarik.

Kiriman terbaru