Dashboard

Untuk memberikan efek transparan pada elemen gambar, kita bisa gunakan properti pada CSS yaitu opacity:nilai dan filter:alpha(opacity=nilai). Kedua properti tersebut memiliki kesamaan dalam tingkat ketransparannya, yang membedakan keduanya hanyalah nilai dan support browsernya.
Untuk properti opacity:nilai digunakan pada browser Firefox dengan nilai 0.0 hingga 1, sedangkan properti filter:alpha(opacity=nilai) digunakan pada browser IE dengan nilai 0 hingga 100. Semakin kecil nilainya, semakin besar tingkat ketransparannya. Efek transparan ini hanya dapat terlihat pada browser yang mendukung CSS3.

Cara 1

Untuk menampilkan efek transparan langsung dari tag <img>

Efek 1
<img src="<!-- url gambar -->"
style="opacity:0.6;filter:alpha(opacity=60)" />

Efek 2
<img src="<!-- url gambar -->"
style="opacity:0.6;filter:alpha(opacity=60)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" />

• Ganti <!-- url gambar --> dengan alamat gambar. Contoh src="http://domain.com/gambar.jpg"
• Ganti angkanya sesuai dengan tingkat ketransparan yang diinginkan.
• Untuk Efek 2 atribut onmouseover digunakan jika sedang berada dalam gambar, sedangkan atribut onmouseout digunakan ketika kursor tidak sedang berada dalam gambar.

Cara 2

Dilakukan dengan menaruh properti opacity:nilai dan filter:alpha(opacity=nilai) kepada tag img dalam CSS.

Efek 1
img {
opacity:0.6;
filter:alpha(opacity=60);
}

Efek 2
img {
opacity:0.6;
filter:alpha(opacity=60);
}
img:hover {
opacity:1;
filter:alpha(opacity=100);
}

• Cara diatas, akan mengubah seluruh gambar pada website menjadi efek transparan.
• Ganti angkanya sesuai dengan tingkat ketransparan yang diinginkan.
• Untuk Efek 2 tag img:hover digunakan ketika kursor berada dalam gambar, sedangkan tag img digunakan ketika kursor tidak sedang berada dalam gambar.
• Khusus tag img:hover bisa dikosongkan, karena secara default akan menggunakan properti opacity:1; dan filter:alpha(opacity=100);

Source