Membuat Efek Hover Transparan pada Gambar

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.ilmu-modern.blogspot.com" class="thumbopacity" >
    <img border="0" src="................................jpg" /></a>

Keterangan:
- Kode berwarna merah andalah adalah url blog
- Kode berwarna hijau adalah url gambar

---

by Facebook Comment untuk Anda!

---

Artikel Terkait

Tutorial Blogger

• 3 Widget Animated Bird Twitter Follow untuk Blogger, Keren!
• Cara Meng-Upload Gambar Jumlah Banyak Pada Postingan Blogger
• Trik Sederhana Cara Proteksi Gambar di Blog
• Cara Membuat Open New Tab Pada Setiap Link di Blog
• Cara Menghilangkan Link Posting Lama dan Postingan Baru di Blog
• Cara Agar Postingan Blog Tidak Bisa di Copy
• Cara Membuat Efek Zoom Gambar saat Dilalui Kursor
• Cara Membuat Efek Meteor Jatuh di Blog
• Cara Membuat Cursor Diikuti Bintang di Blog
• Cara Membuat Back To Top Dengan Double Click di Blog
• Cara Membuat Link dengan Efek Pelangi
• Cara Mudah Membuat Tampilan Blog/Web Maintenance
• Cara Membuat Efek Link Mengeluarkan Bintang
• Cara Membuat Refresh Otomatis Di Blog
• Cara Membuat Teks yang Di Block Menjadi Berwarna
• Cara Membuat Gambar Berjajar
• Tips Untuk Blogger Pemula
• Cara Memasang Widget Alexa Rank
• Membuat Link begerak bila disentuh kursor mouse
• Cara Mudah Pasang Kotak Komentar Facebook Pada Blogger
• Membuat Judul Blog Bergerak
• Mengukur Seberapa Berat Blog/Web
• Membuat Background Kotak Komentar Lebih Menarik
• Membuat Tombol Share Facebook, Twitter, Stumbleupon, dan Google+ Pada Blogspot

---

---