Cara Menghasilkan Pengaruh Transparan Pada Gambar Blog (Css Image Opacity) - Pendidikan Blog

efek bayangan gambar (CSS 3 Box Shadow).

Dasar CSS Transparansi Gambar (CSS Image Transparency/Opacity)

Properti CSS yang digunakan selaku perintah imbas transparansi gambar merupakan 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 merupakan 1.0, sedangkan pada IE merupakan 100. Untuk menyediakan besaran imbas transparan, kecilkan nilai x-nya. Pengurangan dengan value yang serupa antara browser lain dengan IE merupakan 1/10, jadi minimalkan 0.1 pada opacity dan kurang 10 pada filter untuk mendapat imbas transparansi yang sama. Semakin kecil nilai x kian besar transparansinya.

Contoh:

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

Penggunaan Transparansi Gambar selaku Efek Hover (Mouse Over)

Seperti yang sudah diterangkan di atas, imbas ini sering digunakan dan dipadukan selaku hover effect. Maka, posting kali ini akan berkonsentrasi pada penggunaan transparansi gambar selaku imbas hover.

Sebagaimana pada link (a) dan hover link (a:hover), kita pun sanggup 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, jika ingin gambar berubah jadi terang (tidak transparan) dikala 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 menghasilkan imbas transparan gambar yang ingin diberi imbas 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 imbas hover transparan merupakan gambar yang mengandung link, maka dibutuhkan 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="https://ujianhidup10.blogspot.com/"><img  border="0" src="http://urlgambar.com/image.jpg" /></a>

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

Klik untuk Memperbesar Gambar

Good Luck and Enjoy!
mencuri merupakan pekerjaan pengecut! © buka-rahasia.blogspot.com