Membuat Gambar Transparan Dengan CSS

Setelah rekan blogger mengetahui bagaimana caranya memasukan gambar ke dalam blog, baik itu di postingan, sidebar ataupun pada header. Selanjutnya silahkan rekan blogger ikuti trik dibawah ini tentang membuat gambar menjadi transparan atau istilahnya Opacity dengan memasukan sedikit kode css kedalamnya. Seperti contoh yang saya terapkan pada space iklan diatas, dengan menambahkan efek mouseover.

Perhatikan contoh gambar dibawah ini!

image1
image1

Untuk membuat gambar menjadi transparan kita perlu membubuhkan kode css kedalam kode gambarnya. Perhatikan kode gambar dibawah ini :

<img src="url gambar anda" alt="keterangan gambar" width="150" height="113" style="opacity:x; filter:alpha(opacity=x)"/>


Pada kode yang berwarna hijau merupakan kode yang ditambahkan untuk membuat gambar menjadi transparan. Kalau kita perhatikan Ada dua penambahan pada kode berwarna hijau, pertama opacity:x; dan 1filter:alpha(opacity=x). Pertama, opacity:x; merupakan kode yang di support oleh Mozilla Firefox. Kita bisa mengganti huruf x dengan nilai antara 0.0 - 1.0. Nilai yang lebih rendah membuat gambar lebih transparan. Kedua, filter:alpha(opacity=x) merupakan kode yang di support oleh Internet Explorer. Huruf x bisa kita ganti dengan 0 - 100. Sama halnya dengan diatas, nilai yang yang lebih rendah membuat gambar lebih transparan.

Menambahkan efek mouseover

image1 image2

Untuk menambahkan efek mouseover, ada sedikit kode yang mesti ditambahkan. Penambahannya ialah onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40".
Pada bagian onmouseout, silahkan rekan-rekan tambakan nilainya sesuai dengan kode transparannya. Sedangkan pada onmouseover, tidak perlu ada perubahan. Sehingga kode keseluruhan pada efek mouse over menjadi seperti ini :

<img src="url gambar anda" alt="keterangan gambar" width="150" height="113" style="opacity:0.4; filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Title : Membuat Gambar Transparan Dengan CSS
Description : Setelah rekan blogger mengetahui bagaimana caranya memasukan gambar ke dalam blog, baik itu di postingan, sidebar ataupun pada header. Selan...

6 Responses to "Membuat Gambar Transparan Dengan CSS"

Terimakasih sudah memberikan komentar pada tulisan saya :)
Mohon maaf, komentar spam dan menyematkan link tidak bermanfaat terpaksa saya hapus!

Semoga bermanfaat!