Gambar Transparan dengan CSS3

Hai semua :) Hari ini kita akan mempelajari cara membuat gambar menjadi transparan dengan menggunakan CSS3. Ini akan menjadi pembelajaran yang sangat mudah. Karena kita hanya akan membutuhkan beberapa huruf untuk membuatnya menjadi transparan. Loh? Bagaimana bisa? Langsung saja pelajari ya!

Untuk membuat sebuah gambar menjadi transparan, kita hanya tinggal menyelipkan kata "opacity" pada cssnya. Hah? Semudah itu? Tentu saja. Lalu, bagaimana caranya? Pertama kita membutuhkan sebuah gambar. Ini contohnya :

Sekarang kita akan mencoba membuat gambar menjadi transparan. Perhatikan contoh berikut :

See the Pen Bqoib by Dumet_School (@dumet_school) on CodePen.

Di sebelah kiri, adalah contoh utamanya, dimana gambar menjadi transparan saat ditampilkan. Sedangkan yang sebelah kanan, adalah contoh bagaimana efek gambar pada saat hover.

Penjelasan script :

opacity dan filter: alpha(opacity=...) untuk penggunaannya sama. Yang membedakan adalah, opacity dipakai untuk browser Internet Explorer 9, Firefox,Chrome, Opera dan Safari. Dan value-nya berkisar dari 0.0 - 1.0. Semakin kecil value, maka semakin transparan gambarnya.

Sedangkan filter: alpha(opacity=...) dipakai untuk browser Internet Explorer 8. Dan value-nya dimulai dari 0 - 100. Semakin kecil value, maka semakin transparan gambarnya.

Benar-benar mudah kan? Semoga bermanfaat ya :)