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

Popular posts from this blog

Cara Mudah Ambil Uang di ATM BRI (+gambar)

Ramalan Jodoh dan Pasangan Hidup Menurut Tanggal Lahir

Cara Mengetahui Hari Kelahiran Weton Jawa - Online