Hover Gambar dengan Grayscale CSS3

Website yang memiliki banyak gambar akan terlihat menarik jika gambar tersebut ada feedback untuk pengunjungnya. Karena dengan adanya feedback akan memberitahu bahwa gambar tersebut memiliki aksi yang akan terjadi jika gambar tersebut kita klik. Salah satu contoh feedback yang dapat kalian pergunakan adalah hover. Hover ini adalah suatu fitur pada css yang berfungsi untuk merubah suatu objek pada saat mouse kita arahkan pada objek tersebut. Misalnya kita mempunyai menu, saat dihover menu tersebut berubah warna backgroundnya. Seperti itulah kira-kira contoh hover.

Pada pembahasan kali ini kita akan mencoba membuat hover gambar dengan grayscale css3. Jadi objek yang akan kita rubah adalah gambar, saat mouse kita arahkan pada suatu gambar, maka gambar tersebut akan berubah warna menjadi abu-abu. Itu karena fungsi dari filter dengan nilainya grayscale. Tetapi pada contoh kali ini, kita balik aksinya sehingga gambar awal adalah abu-abu, saat dihover berubah menjadi gambar awalnya. Caranya bagaimana ? kalian bisa ikuti langkah berikut ini.

Buat file html seperti contoh code dibawah ini.

grayscale.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Hover Gambar</title>
	<style>
		.container{
			width: 500px;
			margin:auto;
		}
		img{
			-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    		filter: grayscale(100%);
    		-webkit-transition: filter 2s; /* Safari */
		}
		img:hover{
			-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    		filter: grayscale(0%);
		}
	</style>
</head>
<body>
	<div class="container">
		<center><h1>Arahkan Mouse pada gambar</h1></center>
		<img src="Spongebob.png" alt="" width="400">
	</div>
</body>
</html>

Setelah sudah kalian bisa simpan file tersebut dengan format html. Untuk melihat hasilnya kalian bisa buka file tersebut lewat browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti ini.

hover-gambar-dengan-grayscale-css3-rangga1-200617

gambar diatas adalah tampilan awalnya. Jika kalian arahkan mouse pada gambar maka hasilnya akan berubah menjadi seperti ini.

hover-gambar-dengan-grayscale-css3-rangga2-200617

gambarnya berubah warna menjadi warna semula, dan perubahan warna ini akan ada sedikit efek delay karena pada css kita sisipkan perintah transition.

Mudah bukan ? kalian bisa kreasikan fungsi ini sesuai dengan kebutuhan dan imajinasi kalian agar terlihat lebih kompleks lagi.

Sekian pembahasan mengenai bagaimana cara membuat hover gambar dengan grayscale css3. Semoga bermanfaat.

 

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *