Membuat Hover dengan Filter pada CSS3

Hover adalah suatu kegiatan dimana apabila kita mengarahkan mouse pada objek tertentu maka objek tersebut akan mengalami perubahan. Perubahanya bisa apa saja, mulai dari ukuran, warna, dll. Hover menjadi hal yang akan kalian temui dimana pun. Karena tujuan dibuat hover adalah untuk memberikan kesadaran pada pengunjung tentang keberadaan objek tersebut. Sesuai dengan pembahasan kita kali ini, kita akan belajar membuat hover dengan filter pada CSS3.

Filter adalah suatu perintah yang ada pada CSS yang bertugas untuk memberikan efek pada objek HTML. Efek yang diberikan oleh filter ada banyak sekali. Kurang lebih efeknya seperti kita saat mengedit suatu foto. Pada artikel kali ini kita akan mencoba membuat filter dengan efek blur. Bagaimana cara mengimplementasikan filter tersebut pada website kita ? kalian bisa simak contoh code berikut ini. Kalian bisa salin code dibawah ini agar mempersingkat waktu.

blur.html

<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="kotak">
		<img src="laut.jpg" alt="">
	</div>
</body>
</html>

style.css

.kotak{
	width: 500px;
	background: black;
	padding: 10px;
}
.kotak img{
	width: 100%;
	filter:blur(5px);
}
.kotak img:hover{
	filter:blur(0px);
}

Setelah sudah kalian simpan file tersebut sesuai dengan namanya masing-masing. Dan jangan lupa untuk menyimpan kedua file tersebut dalam satu folder agar dapat berjalan dengan lancar. Untuk melihat hasilnya kalian bisa buka file htmlnya pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

Gambar diatas adalah tampilan awal. Gambar dibuat sedikit blur. Jika kalian mengarahkan mouse pada gambar tersebut, maka gambar tersebut akan berubah menjadi seperti ini.

Gambar tersebut akan kembali seperti semula tanpa adanya blur. Seperti itu kira-kira pengaplikasian menggunakan hover filter CSS. Kalian bisa kembangkan lagi script ini menjadi lebih kompleks dan sesuai kebutuhan website kalian. Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara membuat hover dengan filter pada CSS3. Semoga artikel kali ini bermanfaat bagi kalian semua. Sampai jumpa pada pembahasan menarik dan tak kalah seru lainya hanya di dumetschool !