Cara Membuat Efek Transparan Pada Gambar Blog (CSS Image Opacity)

efek transparan/opacity gambar dengan CSS

efek bayangan gambar (CSS 3 Box Shadow).

Dasar CSS Transparansi Gambar (CSS Image Transparency/Opacity)

Properti CSS yang digunakan sebagai perintah efek transparansi gambar yakni opacity:x. Properti ini digunakan oleh Mozilla Firefox dan beberapa browser lain. Sedang pada IE (Internet Explorer) digunakan properti filter:alpha(opacity=x). X adalah nilai transparansi, pada Mozilla Firefox dan beberapa browser lain, nilai defaultnya yakni 1.0, sedangkan pada IE yakni 100. Untuk menunjukkan besaran efek transparan, kecilkan nilai x-nya. Pengurangan dengan value yang sama antara browser lain dengan IE yakni 1/10, jadi kurangi 0.1 pada opacity dan kurang 10 pada filter untuk menerima efek transparansi yang sama. Semakin kecil nilai x semakin besar transparansinya.

Contoh:

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

Penggunaan Transparansi Gambar sebagai Efek Hover (Mouse Over)

Seperti yang telah dijelaskan di atas, efek ini sering digunakan dan dipadukan sebagai hover effect. Maka, posting kali ini akan berfokus pada penggunaan transparansi gambar sebagai efek hover.

Sebagaimana pada link (a) dan hover link (a:hover), kita pun dapat menerapkannya pada gambar.

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

Contoh (arahkan mouse ke atas gambar):

Atau sebaliknya, bila ingin gambar berubah jadi terang (tidak transparan) saat mouse diarahkan diatasnya, tukar nilai transparansinya:

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

Contoh (arahkan mouse ke atas gambar):

Membuat Efek Hover Transparan Pada Gambar Secara Individual (tanpa link)

Jika ingin membuat efek transparan gambar yang ingin diberi efek tanpa mengandung link (diapit tag <a> dan </a>):

1. Masukkan script berikut di atas ]]></b:skin>

.brl-transparan {opacity:1.0;filter:alpha(opacity=100);}
.brl-transparan:hover {opacity: 0.5;filter:alpha(opacity=50);}

atau sebaliknya,

.brl-transparan {opacity: 0.5;filter:alpha(opacity=50);}
.brl-transparan:hover {opacity:1.0;filter:alpha(opacity=100);}

2. Save template.

3. Pada tag gambar, baik di edit HTML post editor atau di edit HTML template, tambahkan class="brl-transparan"

Contoh:

<img class="brl-transparan" border="0" src="http://urlgambar.com/image.jpg" />

Membuat Efek Hover Transparan Pada Gambar yang Mengandung Link

Jika yang ingin diberi efek hover transparan yakni gambar yang mengandung link, maka diperlukan deklarator link (a) dan image (img) pada CSSnya:

1. Masukkan script berikut di atas ]]></b:skin>

a.brl-transparan img {opacity:1.0;filter:alpha(opacity=100);}
a.brl-transparan:hover img {opacity: 0.5;filter:alpha(opacity=50);}

atau sebaliknya,

a.brl-transparan img {opacity: 0.5;filter:alpha(opacity=50);}
a.brl-transparan:hover img {opacity:1.0;filter:alpha(opacity=100);}

2. Save template.

3. Pada tag link gambar, baik di edit HTML post editor atau di edit HTML template, tambahkan class="brl-transparan"

Contoh:.

<a class="brl-transparan" href="http://buka-rahasia.blogspot.com"><img border="0" src="http://urlgambar.com/image.jpg" /></a>

Berikut pola gambar yang mengandung link beserta efek transparansi gambar-nya:

Klik untuk Memperbesar Gambar