Cara membuat Image Transparency atau gambar transparan, yaitu- Sign in ke Blogger - Rancangan - Edit HTML
- Cari (gunakan Ctrl+F) kode img
- Ganti kode menjadi
img{opacity:0.6; filter:alpha(opacity=60);}
img:hover{opacity:1.0; filter:alpha(opacity=100);} - 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
- Masih pada Edit HTML Template, cari (gunakan Ctrl+F) kode .post img atau .content img
- 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);} - Simpan Template
- Buat posting baru, upload gambar lalu tambahkan kode class="transparan" didalam <img ---- />, seperti
<img class="transparan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_oCImBG4kDnK_9fnncAhwiQ8cHm4s916rB6u-HdRyx7-eeHwFCXycO3fAQka4IdsMskzz2AEC8NaWJWibJojYzizQiz8vcHwXitk-HmXyn8-ZvfxSpdDBMN7TwVXX9LYtYobULRcG02A/s400/linux+mint+caang1.jpg" alt="linux_mint_kang_caang" /> - Lihat dan arahkan mouse pointer pada gambar dibawah ini
Gambar default tanpa CSS Image Transparency
Gambar dengan sentuhan CSS Image Transparency
Belum ada tanggapan untuk "Cara Membuat Gambar Memudar With Css"
Posting Komentar