Cara Membuat Efek Gambar Transparan (Transparency Image Opacity)

Cara Membuat Efek Gambar Transparan (CSS Image Opacity) - Sudah hampir 2 minggu (diperkirakan) saya tidak aktif. Aktif dalam post/update artikel di ANVITY Blog | Internet Learning. Alasannya belum lama akhir-akhir ini selama 2 minggu saya menghadapi UKK (Ulangan Kenaikan Kelas). Hal tersebut yang membuat saya berhenti sementara. Tetapi Alhamdullilah saya kembali lagi dengan artikel saya yang masih tidak jauh di bidang HTML dan tutorialnya. Artikel kali ini yang akan saya bahas adalah tentang cara membuat gambar di blog menjadi transparan dengan sedikit mengutak-atik HTML template blog kita.

- kembali ke laptop -

Efek transparan pada gambar (image transparency/opacity) biasa digunakan di blog/web sebagai efek hover (mouse over). Efek transparan ini biasa digunakan sebagai penambah efek/kesan menarik pada gambar. Tampilan transparan gambar yang akan timbul (atau sebaliknya) ketika mouse diarahkan di atas gambar. Transparansi gambar merupakan salah satu efek yang dapat dibuat dengan CSS dengan modifikasi sederhana.

Coba kalian arahkan mouse/cursor kalian pada gambar di bawah ini. Jenis efek transparan gambar yang saya pakai

Arahkan mouse/cursor kalian (mouse over) ke sini

Contoh sederhana Transparency Effect (Efek Transparan) - Dasar

Berdasarkan cara penggunaan CSS, efek transparan terbagi menjadi 2 jenis, yaitu:

1. Gambar transparan [mouse over]> gambar asli.
   Yang dimaksudkan adalah pada sebelum mouse over, gambar transparan (a). Setelah mouse over, gambar asli (a:hover)
2. Gambar asli [mouse over]> gambar transparan.
   Sedangkan pada jenis ini, kebalikan dari jenis kesatu. Pada sebelum mouse over, gambar asli (a). Setelah mouse over, gambar transparan (a@x:hover).

[X] Sebagai contoh saya pakai "Gambar asli [mouse over]> gambar transparan". Berikut CSS jenis ini.

img {opacity:1.0;filter:alpha(opacity=100}
img:hover {opacity: 0.5;filter:alpha(opacity=50}

Hasil gambar dari pengkodean CSS diatas.

[X] Sedangkan pada "Gambar transparan [mouse over]> gambar asli". Seperti pada contoh gambar diatas (Pasang Iklan). Berikut CSS jenis ini.

img {opacity: 0.5;filter:alpha(opacity=50}
img:hover {opacity:1.0;filter:alpha(opacity=100}

Hasil gambar dari pengkodean CSS diatas.

Dasar/definisi mengenai Transparency Effect (Efek Transparan)

Mungkin dengan beberapa contoh sederhana diatas dapat memberi sedikit kemudahan dalam  memahaminya. Properti CSS yang digunakan sebagai perintah agar efek transparan pada gambar berfungsi/muncul adalah opacity:x (x adalah pengganti/sementara). Properti ini digunakan oleh Mozilla Firefox, Google Chrome dan beberapa browser lain. Sedang pada IE (Internet Explorer) digunakan properti filter:alpha(opacity=x). Pada Mozilla Firefox dan beberapa browser lain, nilai default/gambar asli adalah 1.0, sedangkan pada IE adalah 100.

Untuk memberikan besaran efek transparan, kecilkan nilai x. Pengurangan dengan value yang sama antara browser lain dengan IE adalah 1/10, jadi kurangi 0.1 pada opacity dan kurang 10 pada filter untuk mendapatkan efek transparansi yang sama. Semakin kecil nilai x semakin besar transparansinya.

Bagaimana cara penggunaan Transparency Effect (Efek Transparan)?

Untuk cara mengunakannya dapat dipakai jika gambar disertai link atau tanpa link. Antara kedua jenis tersebut berbeda penggunaannya.

Efek transparansi tanpa link.
1.  Siapkan terlebih dahulu gambar dan script yang akan digunakan. (copy-kan/salin)

.transpararent-anvity {opacity:1.0;filter:alpha(opacity=100)}
.transparent-anvity:hover {opacity: 0.5;filter:alpha(opacity=50)}

Atau sebaliknya,

.transpararent-anvity {opacity: 0.5;filter:alpha(opacity=50)}
.transparent-anvity:hover {opacity:1.0;filter:alpha(opacity=100)}

2.  Letakan script diatas tepat diatas ]]></b:skin> dan Save Template.
3.  Pada tag gambar (<img></img>), baik di edit HTML post editor atau di edit HTML template, tambahkan class="transparent-anvity"
Sebagai contoh:

<img class="transparan-anvity" src="URL GAMBAR" /></img>

Efek transparansi disertai link.

1.  Siapkan terlebih dahulu gambar dan script yang akan digunakan. (copy-kan/salin)

a.transpararent-anvity {opacity:1.0;filter:alpha(opacity=100)}
a.transparent-anvity:hover {opacity: 0.5;filter:alpha(opacity=50)}

Atau sebaliknya,

a.transpararent-anvity {opacity: 0.5;filter:alpha(opacity=50)}
a.transparent-anvity:hover {opacity:1.0;filter:alpha(opacity=100)}

2.  Letakan script diatas tepat diatas ]]></b:skin> dan Save Template.
3.  Pada tag link gambar (<a></a>), baik di edit HTML post editor atau di edit HTML template, tambahkan class="transparent-anvity"
Sebagai contoh:

<a class="transparent-anvity" href="http://www.anvity.com"></a>

Nah, diatas adalah cara (tutorial) menggunakan efek transparan pada gambar yang mengandung link maupun gambar tanpa disertai link. Semoga artikel diatas informatif dan mudah dipahami bagi pembaca ANVITY Blog | Internet Learning. Enjoy!

Title Post: Cara Membuat Efek Gambar Transparan (Transparency Image Opacity)
Rating: 100% based on 9999989 ratings. 98 user reviews.
Author: Borneo08

Terimakasih sudah berkunjung di blog ini, Jika ada kritik dan saran silahkan tinggalkan komentar