CSS Image Opacity / Transparency

Bagaimana cara membuat foto atau gambar menjadi transparan menggunakan CSS?
Sebenarnya jika pakai CSS seperti yang akan saya contohkan nanti bukanlah membuat foto menjadi tembus pandang, akan tetapi hanya merubah suatu foto menjadi samar-samar atau sedikit tidak jelas.

Lalu bagaimana caranya membuat foto menjadi transparent hanya jika disorot mouse?
Bisa. Anda cukup menambahkan CSS :hover

Silahkan Anda lihat demo terlebih dahulu sebelum mulai menggunakan kode.

<h1>Image Transparency</h1>
<style>
img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
<img src="http://2.bp.blogspot.com/-d9yfxfosf6o/VaxStdaLygI/AAAAAAAACIU/FYK7f8InUkc/s1600/klematis.jpg" width="150" height="113" alt="klematis"/>

<h1>Image Transparency Hover</h1>
<style>
img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
<img src="http://2.bp.blogspot.com/-d9yfxfosf6o/VaxStdaLygI/AAAAAAAACIU/FYK7f8InUkc/s1600/klematis.jpg" width="150" height="113" alt="klematis"/>
<img src="http://4.bp.blogspot.com/-4-U7iKb26NQ/VaxStLMxJiI/AAAAAAAACIQ/XI8_Z5BCdto/s1600/klematis2.jpg" width="150" height="113" alt="klematis"/>
Catatan: Pada IE, Penambahan !DOCTYPE adalah wajib agar :hover selector bisa berfungsi
Lebih jelas lihat Example
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini