CSS Opacity

Opacity adalah properti CSS yang digunakan untuk mengatur transparansi atau kejelasan elemen HTML. Nilai opacity berkisar dari 0 (transparan sepenuhnya) hingga 1 (terlihat sepenuhnya).

Contoh Penggunaan opacity

1. Mengatur Opacity Elemen

Dengan mengatur nilai opacity, kita bisa membuat elemen menjadi lebih transparan.

<style>
  .transparan {
    opacity: 0.5; /* 50% transparan */
  }
</style>
 
<div class="transparan">
  <p>Elemen ini memiliki opacity 0.5.</p>
</div>

2. Efek Opacity pada Gambar

Opacity sangat sering digunakan pada gambar untuk menciptakan efek transparansi.

<style>
  img {
    opacity: 0.7; /* Gambar sedikit transparan */
  }
</style>
 
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Trulli">

3. Menggunakan Opacity dengan Hover

Opacity bisa digunakan dengan efek hover untuk memberikan transisi visual ketika pengguna berinteraksi dengan elemen.

<style>
  .hover-opacity {
    opacity: 1;
    transition: opacity 0.5s;
  }
  
  .hover-opacity:hover {
    opacity: 0.3;
  }
</style>
 
<div class="hover-opacity">
  <p>Hover di sini untuk mengubah opacity!</p>
</div>

Ringkasan Properti Opacity

Catatan: Ketika mengubah nilai opacity pada elemen, anak-anak elemen tersebut juga akan terpengaruh, karena transparansi diturunkan ke elemen-elemen di dalamnya.