Cara Membuat Efek Transparan Pada Gambar Blog CSS Image Opacity

Efek transparan dalam gambar (image transparency/opacity) acapkali dipakai pada Blog/web sebagai dampak hover (mouse over) yaitu tampilan transparansi gambar (atau sebaliknya) ketika mouse diarahkan pada atas gambar. Transparansi gambar merupakan salah satu pengaruh yg bisa dibentuk dengan CSS dan dimodifikasi sedemikian rupa, sama halnya dengan dampak-efek yg lain, contohnya efek bayangan gambar (CSS 3 Box Shadow).

Dasar CSS Transparansi Gambar (CSS Image Transparency/Opacity)

Properti CSS yg dipakai menjadi perintah imbas transparansi gambar merupakan opacity:x. Properti ini dipakai sang Mozilla Firefox serta beberapa browser lain. Sedang pada IE (Internet Explorer) dipakai properti filter:alpha(opacity=x). X adalah nilai transparansi, dalam Mozilla Firefox dan beberapa browser lain, nilai defaultnya merupakan 1.0, sedangkan dalam IE adalah 100. Untuk memberikan besaran imbas transparan, kecilkan nilai x-nya. Pengurangan dengan value yg sama antara browser lain dengan IE merupakan 1/10, jadi kurangi 0.1 dalam opacity serta kurang 10 pada filter untuk mendapatkan impak transparansi yang sama. Semakin mini nilai x semakin besar transparansinya.
Contoh:
img opacity:0.5;filter:alpha(opacity=50;}

Penggunaan Transparansi Gambar menjadi Efek Hover (Mouse Over)

Seperti yg telah dijelaskan pada atas, efek ini tak jarang dipakai serta dipadukan sebagai hover effect. Maka, posting kali ini akan berfokus pada penggunaan transparansi gambar sebagai impak hover.
Sebagaimana pada link (a) serta 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 kebalikannya, jika ingin gambar berubah jadi terperinci (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 impak transparan gambar yang ingin diberi efek tanpa mengandung link (diapit tag dan ):
1. Masukkan script berikut di atas ]]>
.brl-transparan opacity:1.0;filter:alpha(opacity=100);
.brl-transparan:hover opacity: 0.5;filter:alpha(opacity=50);
 atau kebalikannya,
.brl-transparan opacity: 0.lima;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 pada edit HTML template, tambahkan class="brl-transparan"
Contoh:
class="brl-transparan" border="0" src="https://urlgambar.com/image.jpg" />

Membuat Efek Hover Transparan Pada Gambar yang Mengandung Link

Jika yang ingin diberi pengaruh hover transparan merupakan gambar yg mengandung link, maka dibutuhkan deklarator link (a) dan image (img) pada CSSnya:
1. Masukkan script berikut di atas ]]>
a.brl-transparan img opacity:1.0;filter:alpha(opacity=100);}
a.brl-transparan:hover img opacity: 0.5;filter:alpha(opacity=50);}
 atau kebalikannya,
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 pada edit HTML post editor atau pada edit HTML template, tambahkan class="brl-transparan"
Contoh:.
class="brl-transparan" href="//tentang-soal.blogspot.com">
 Berikut contoh gambar yang mengandung link bersama efek transparansi gambar-nya:
Good Luck and Enjoy!
mencuri adalah pekerjaan pengecut! © tentang-soal.blogspot.com

Tidak ada komentar untuk "Cara Membuat Efek Transparan Pada Gambar Blog CSS Image Opacity"