headerphoto

Kali ini kita belajar CSS lagi, mengenai Image Transparency atau gambar transparan. Bagaimana teknik membuat gambar pada Blog terlihat memudar, seolah tidak jelas, namun jika mouse pointer diarahkan pada image tersebut, gambar yang terlihat memudar tadi akan berubah menjadi jelas.

Cara membuat Image Transparency atau gambar transparan, yaitu
  1. Sign in ke Blogger - Rancangan - Edit HTML
  2. Cari (gunakan Ctrl+F) kode img
  3. Ganti kode menjadi
    img{opacity:0.6; filter:alpha(opacity=60);}
    img:hover{opacity:1.0; filter:alpha(opacity=100);}
  4. Simpan Template dan lihat hasilnya

Kode CSS Image Transparency seperti diatas, berlaku untuk image pada semua bagian template, seperti gambar di sidebar, posting, atau footer. Namun ada kalanya pada bagian posting, CSS image mempunyai kode tersendiri seperti .post img atau .content img. Kita bisa memberlakukan CSS Image Transparency ini hanya pada bagian posting tersebut, caranya
  1. Masih pada Edit HTML Template, cari (gunakan Ctrl+F) kode .post img atau .content img
  2. Tambahkan kode berikut ini dibawahnya
    .post img.transparan{opacity:0.6; filter:alpha(opacity=60);}
    .post img.transparan:hover{opacity:1.0; filter:alpha(opacity=100);}
  3. Simpan Template
  4. Buat posting baru, upload gambar lalu tambahkan kode class="transparan" didalam <img ---- />, seperti
    <img class="transparan" src="http://1.bp.blogspot.com/_BXJ5hczKH1s/S4AL8pVM4yI/AAAAAAAAAmQ/cHPcAe0ipIA/s400/linux+mint+caang1.jpg" alt="linux_mint_kang_caang" />
  5. Lihat dan arahkan mouse pointer pada gambar dibawah ini

    linux_mint_kang_caang
    Gambar default tanpa CSS Image Transparency


    linux_mint_kang_caang
    Gambar dengan sentuhan CSS Image Transparency

Next→
←Prev

Terkait

Share: FB-share Twitter-share

Join dan Dapatkan Info Terbaru via Email

2 komentar

  1. ijin mempraktikkna sob..terus kalo membuat gambar selsalu transparaancy gmana???

    BalasHapus
  2. Jalan2 Disni Info Nya Keren2

    BalasHapus