Efek Transparan Pada Gambar

Diposting oleh Abdul Rahman | at 09.40

Wow.Gambarnya Yahooet ..oK langsung ke tutornya :
Contoh sederhana Transparency Effect (Efek Transparan) - Dasar
Berdasarkan cara penggunaan CSS, efek transparan terbagi menjadi 2 jenis, yaitu:Gambar transparan [mouse over]> gambar asli.

Yang dimaksudkan adalah pada sebelum mouse over, gambar transparan (a). Setelah mouse over, gambar asli (a:hover)
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
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