Cara membuat gambar opacity atau blur di CSS

Kegunaan CSS opacity

Opacity sekarang menjadi bagian dari spesifikasi CSS3, tetapi opacity sudah ada sejak lama. Namun, browser lama memiliki cara yang berbeda untuk mengontrol opacity atau transparansi.

Opacity memiliki nilai default 1 (satu) dan opacity tidak diwarisi, tetapi karena induk memiliki opacity yang diterapkan sehingga semua yang ada di dalamnya ikut transparan. Tetapi Anda bisa menerapkan opacity pada elemen induk agar tidak berpengaruh pada elemen didalamnya dengan menggunakan nilai color RGBA.

Opacity dengan image

Anda bisa membuat gambar menjadi transparan dengan properti opacity. Gambar dibawah ini mempunyai nilai berbeda pada setiap properti opacity.

Opacity 0.2

Opacity 0.5

Opacity 1 (default)

#gambar1 {
    opacity: 0.2;
}
#gambar2 {
    opacity: 0.7;
}

Cross browser opacity

Browser lama memiliki cara yang berbeda untuk mengontrol opacity atau transparansi. Salah satunya properti opacity yang tidak didukung pada browser Internet explorer versi 8 dan sebelumnya.

Agar bekerja pada Internet explorer versi 8 dan sebelumnya Anda bisa menggunakan metode cross browser, Silakan gunakan properti filter: alpha(opacity=x). X dapat mengambil nilai dari 0 – 100. Sebuah nilai yang lebih rendah membuat elemen lebih transparan.

img {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

Opacity dengan efek hover

Anda bisa mengkombinasikan style properti opacity dengan efek :hover atau ketika mouse diatas elemen pada kasus ini gambar.

img {
    opacity: 0.6;
    filter: alpha(opacity=60);
}
img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
}

Teks dalam box transparan

Jika Anda menggunakan properti opacity maka semua elemen yang ada di dalamnya ikut transparan. Opacity tidak mewarisi, tetapi karena induk memiliki opacity yang diterapkan sehingga semua yang ada di dalamnya ikut transparan. Ini membuat teks di dalam elemen ikut transparan dan sulit dibaca jika nilai opacity menjadi lebih rendah.

div {
    background-color: red;
    padding: 15px;
}
#box1 {
    opacity: 0.1;
    filter: alpha(opacity=10);
}
#box2 {
    opacity: 0.4;
    filter: alpha(opacity=40);
}
#box3 {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

Transparan menggunakan RGBA

Seperti pada contoh diatas, jika Anda menggunakan properti opacity maka elemen yang ada didalamnya ikut transparan. Dengan menggunakan nilai color RGBA Anda bisa menerapkan transparan hanya pada elemen induk saja dan tidak akan mengenai elemen didalamnya atau elemen anak.

div {
    background-color: red;
    padding: 15px;
}
#box1 {
    background: rgba(255, 0, 0, 0.1);
}
#box2 {
    background: rgba(255, 0, 0, 0.4);
}
#box3 {
    background: rgba(255, 0, 0, 0.7);
}

Belajar lebih dalam tentang color CSS