CSS Image Opacity / Transparency

Author : Sigit Purnomo | Released : July 19, 2015 | Category :
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

Google+

Linkedin

Silahkan berkomentar sesuai topik yang dibahas