Kemarin sempet seorang teman saya menanyakan kepada saya bagaimana cara membuat gambar/image awalnya black and white kemudian setelah cursor mouse di arahkan ke image, image tersebut berubah warna kembali ke warna aslinya.
Teknik ini hanya memainkan fungsi hover pada css. yang biasanya di gunakan untuk membuat menu navigasi.
Baca Juga :
Ok, mari kita mulai pembuat scriptnya.
Copy script berikut pada file dimana kamu menaruh semua code css website kamu.
img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://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"); /* Firefox 3.5+, IE10 */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
(*Edit Script)
Pada kelompok code pertama adalah fungsi untuk membuat image menjadi black and white, dan kelompok kedua men-deactive-kan fungsi code kelompok pertama, sehingga warna gambar yang kamu masukan kembali seperti semula, sesuai dengan warna aslinya.
Untuk settingan HTMLnya, kamu tidak perlu memasukan code apa-apa lagi cukup memasukan script pemanggilan gambar.
Misalnya :
<img src="img/1.jpg" />
Jika kamu menggunakan banyak gambar dengan fungsi atau warna beda-beda, misalnya image A menggunakan warna merah, B black and white, C warna hijau, kamu cukum membuat class atau id pada css yang kamu gunakan.
Jika kamu ingin request tutorial, kirimkan jenis tutorial yang kamu ingin kami buatkan pada halaman Kontak kami, semoga bermanfaat dan silahkan diskusi di kolom komentar.
