Home » , » Membuat Efek Hover Transparan pada Gambar

Membuat Efek Hover Transparan pada Gambar

Redi Apri Handoko | 13.15 | 0 comments
Anda bisa membuat berbagai macam efek hover pada objek yang anda inginkan di blog. Salah satunya yaitu membuat efek hover transparan pada gambar. Efek hover ini akan nampak apabila anda mengarahkan cursor mouse pada object. Jika cursor mouse berada tepat diatas gambar maka gambar tersebut akan menjadi normal, namun jika anda tidak mengarahkan cursor pada gambar maka gambar tersebut menjadi transparan. Jika sobat ingin tau cara membuat efek tersebut ikuti langkahnya dibawah ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit HTML
3. Carilah kode ]]></b:skin>
4. Lalu tambahkan kode Css berikut ini diatas kode ]]></b:skin>
a.thumbopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
a.thumbopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
5. Simpan template anda.

Untuk menerapkan efek tersebut pada gambar yang ingin ditayangkan maka masukan kode seperti dibawah ini

<a href="http://www.blogtrikdantips.blogspot.com" class="thumbopacity" ><img border="0" src="................................jpg" /></a>
Keterangan:
- Kode berwarna merah andalah adalah url blog
- Kode berwarna biru adalah url gambar
Berbagi Dengan Teman:

Posted by : Redi A.H ~ / Tutorial windows, SEO , Info gadget, Download game

Artikel Membuat Efek Hover Transparan pada Gambar Di posting oleh Redi A.H pada 13 Apr 2012. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kontak atau komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging!!!

0 comments:

Posting Komentar

Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.

 
Site Meter :
Copyright © 2011. Tutorial Windows 7 - All Rights Reserved
Proudly powered by Blogger
Thank You For Google