Membuat Efek Hover Transparan pada Gambar

Halo Sahabat Bayoe Semua,

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

Klik disini jika ingin mengetahui hal yang lain tentang Blog

Jika tulisan ini bermanfaat bagi anda, kami sungguh berterima kasih jika anda bersedia membantu kami dengan mengklik, Yang ini ,yang ini, yang ini atau yang ini. satu kali anda mengklik sungguh berharga bagi kami

semoga Informasi tersebut bermanfaat untuk anda.Silahkan  Bertanya jika ada yang kurang dimengerti ^^.

Jangan lupa berkunjung lagi  dan ikuti ya web ini gan.