Hover Gambar dengan Opacity CSS

Terdapat banyak sekali variasi menu hover pada website yang sering kita jumpai. Dari yang mulai merubah warna background, warna text sampai berubah bentuk objek menu juga ada. Menu hover ini memang erat sekali kaitanya dengan user experience karena akan mempengaruhi pengunjung agar tahu apakah menu tersebut dapat memandu kita menu link yang kita cari. Permainan warna atau perubahan bentuk akan membuat pengunjung akan menyadari bahwa objek tersebut dapat kita klik.

Sesuai dengan pembahasan kali ini, kita akan mencoba membuat menu hover dengan gaya lain yaitu hover gambar dengan opacity CSS. Maksudnya adalah kita membuat suatu menu dengan gambar, gambar tersebut akan mengalami perubahan opacity saat kita mengarahkan mouse pada gambar tersebut. Lalu bagaimana cara membuatnya ? kalian bisa ikuti langkah-langkah berikut ini. Kalian buat file baru untuk penulisan code htmlnya. Codenya seperti berikut ini.

gambar.html

<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Arahkan Mouse pada gambar</h1>

<img src="img_forest.jpg" alt="Forest" width="300" >

</body>
</html>

setelah sudah kalian simpan file tersebut dengan format html, lalu untuk melihat hasilnya kalian buka lewat browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti ini.

hover-gambar-dengan-opacity-css-rangga1-210617

gambar diatas adalah gambar saat bentuk awal. Belum terjadi perubahan karena belom ada aksi mouse mengarah pada gambar. Sekarang kalian coba arahkan mouse pada gambar dan lihat apa yang terjadi.

hover-gambar-dengan-opacity-css-rangga2-210617

gambarnya akan terlihat lebih transparan, karena pada cssnya kita masukan nilai opacity berkurang menjadi 50% saat mouse diarahkan pada gambar, begitu mouse keluar dari gambar maka opacitynya kembali seperti semula. Mudah bukan ? kalian bisa kreasikan lagi untuk hover menggunakan opacity ini menjadi lebih kompleks sesuai dengan kebutuhan website dan keinginan kalian.

Sekian pembahasan mengenai bagaimana cara membuat hover gambar dengan opacity CSS. Semoga artikel kali ini bermanfaat dan nantikan artikel menarik dan tidak kalah seru hanya di dumet school tempat kursus website dan desain grapik. Tempatnya belajar dengan cara yang fun.

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 *