Properti opacity menentukan tingkat opasitas (transparansi) suatu elemen. Nilai berkisar antara 0.0 (sepenuhnya tembus pandang) hingga 1.0 (sepenuhnya pekat).
CSS Opacity
Efek Hover Transparansi Gambar:
<!DOCTYPE html>
<html>
<head>
<style>
.img-transparan {
opacity: 0.6;
transition: opacity 0.3s;
border-radius: 8px;
cursor: pointer;
}
.img-transparan:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h3>Arahkan kursor ke gambar:</h3>
<img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=260" class="img-transparan" alt="Laptop">
</body>
</html>
Catatan: Properti opacity membuat seluruh elemen anak di dalamnya ikut menjadi transparan. Jika hanya ingin warna background-nya saja yang transparan, gunakan rgba().