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

efek transparan/opacity gambar dengan CSS
Efek transparan pada gambar (image transparency/opacity) sering digunakan di Blog/web sebagai efek hover (mouse over) yaitu tampilan transparansi gambar (atau sebaliknya) ketika mouse diarahkan di atas gambar. Transparansi gambar merupakan salah satu efek yang dapat dibuat dengan CSS dan dimodifikasi sedemikian rupa, sama halnya dengan efek-efek yang lain, misalnya efek bayangan gambar (CSS 3 Box Shadow).

Dasar CSS Transparansi Gambar (CSS Image Transparency/Opacity)

Properti CSS yang digunakan sebagai perintah efek transparansi gambar adalah 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 adalah 1.0, sedangkan pada IE adalah 100. Untuk memberikan besaran efek transparan, kecilkan nilai x-nya. 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.
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, jika ingin gambar berubah jadi terang (tidak transparan) ketika 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 adalah 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="http://buka-rahasia.blogspot.com"><img  border="0" src="http://urlgambar.com/image.jpg" /></a>
 Berikut contoh gambar yang mengandung link beserta efek transparansi gambar-nya:
Klik untuk Memperbesar Gambar
Good Luck and Enjoy!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
google

Catatan:
Jika anda menemui tutorial lama, maka perhatikan bahwa untuk masuk ke Edit HTML template tidak lagi melalui halaman "design/rancangan", melainkan dari dashboard > template > klik edit HTML. Masih bingung mencari dan edit kode di Edit HTML Blogger baru? Simak tips trik berikut:
1. Cara Mencari Kode di HTML Editor Blog
2. Fitur di HTML Editor Baru
3. Tips Edit HTML Blogger (artikel lama)
Cara Membuat Efek Transparan Pada Gambar Blog (CSS Image Opacity)
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 17 Comment(s):

bradengreews said...

ini yang saya cari - cari mas, teman saya menggabungkan ini sama kode buku tamu, jadi iklannya kyak di belakang layar, mas tau caranya?

Ahmad Khoirul Azmee said...

oh gitu. tolong kasih url blog/web teman anda ya biar saya tau bentuknya. okay :D

zahra said...

oooh tidak bissa... Wajib di pasang di blogku... hahahaa

beby said...

makasih om :) nice inpoh

beby said...

om, tapi saya coba yang di gambar tanpa link kok ga bisa yaa? bgimana tuh om? mohon penjelasannya ya :)

SDF-TYU-JKL-VBN said...

GREAT INFO...... HAHAHA saya coba utak atik2 cssnya malah bikin ancur template.. dah ga kuat saya search di google.. dapet ternyata yg ini manjurrrrrrrr.......!

tq.

albertus.christophorus said...

ijin copas yah OOM :) very very good :)

Rudy Hartono said...

informative sekali

Irawan said...

Terima kasih atas share ilmunya, Insya Allah akan langsung praktek ni

Filest Blog said...

Siip.. transparancy memang sederhana namun bisa buat efek yang bagus apalagi jk kombinasi dengan hovernya. .

:)

Cara Membesarkan said...

makasih atas info yang bagus

Minato Hienzo said...

Mantap mas infonya..
mudah dimengerti dan cepet masuk ke otak
hahahahah

Tarmo Purgana said...

Pas sekali gan, ini yg dicari-cari.
Thanks

mampir jg ke :
http://automotive-learning-center.blogspot.com/

Nur Fitriyani said...

Kalo ini bisa di praktekan di dreamweaver gak? kalo bisa gimana ya? letakkin script nya dimana?

Ahmad Khoirul Azmi said...

Bisa. Gunakan CSS nya di bagian CSS Editor, kemudian gunakan class di HTML-nya.

♥Vpie◥♀◤MahaDhifa♥ said...

.. ijin nyoba ya?!? ..

Andre Panggabean said...

Terimakasih mas sudah share! Thanks saya sudah praktekkan cek saja di blog saya Panduanmisigta.blogspot.com hehehehe. Thanks mas. :)

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

Join Our Team!

© 2013 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap