Coba arahkan kursormu ke gambar tersebut.
Nampaknya ada yang berbeda?
Wah gimana caranya tuh?
Tambahkan kode HTML dibawah ini ke dalam tag img:
style="opacity:0.75;filter:alpha(opacity=75)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.75;this.filters.alpha.opacity=75"Contoh:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtCB7Mcb-0G1TAntosF9Z_6yJ-ltNBr64DG4UjVIe4t3Om6sB8zpY5GlapyXUaT7aBZndD3y85jZcXnPTWDdD6NDgQ7l55IKjjMOAV1skhw56LGzDgqTNowknPuALy4a4KbrddkWaJGXbG/s1600/css.png" style="opacity:0.75;filter:alpha(opacity=75)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.75;this.filters.alpha.opacity=75" />Maka hasilnya akan tampak seperti gambar diatas. Namun cara diatas KHUSUS untuk background hitam. Untuk mengubahnya agar bisa kompatibel dengan background putih, pakailah kode HTML yang ini:
style="opacity:1;filter:alpha(opacity=100)" onmouseover="this.style.opacity=0.9;this.filters.alpha.opacity=90"
onmouseout="this.style.opacity=0.9;this.filters.alpha.opacity=90"Gimana caranya supaya semua gambar kena efek itu?
Untuk segala platform blog, khususnya Blogspot, jika kamu ingin menambahkan efek seperti diatas, dan diterapkan ke semua gambar yang ada di platform blog kamu, maka ikuti petunjuk berikut: Dasboard Blogspot -> Template -> Customize -> Advanced -> Add CSS. Kemudian tambahkan kode CSS berikut
Untuk background hitam
img
{
opacity:.8;
filter:alpha(opacity=80)
}img:hover
{
opacity:1;
filter:alpha(opacity=100)
}Untuk bacground putih
img
{
opacity:1;
filter:alpha(opacity=100)
}img:hover
{
opacity:.9;
filter:alpha(opacity=90)
}
Efek terangnya ga stabil, gimana cara ngubahnya?
Kamu bisa melihat angka .9 dan 90, ubah angka tersebut misalnya jadi .85 dan 85, .8 dan 80, atau sesuai dengan seleramu. Kedua angka tersebut harus sama nilainya, jangan seperti .9 dan 80..
---
Oke, sekian yang bisa Chilly share.
Kalau udah tau ya jangan bosen-bosen kasih tau yang lainnya.
Mau nulis komentar? [klik disini]
Artikel ini ditulis oleh Chillarmy sendiri. Cantumkan sumber apabila kamu mengcopynya.
Mau nulis komentar? [klik disini]
Artikel ini ditulis oleh Chillarmy sendiri. Cantumkan sumber apabila kamu mengcopynya.
