CSS Image Transparency, Bagaimana Membuat Gambar Terlihat Memudar
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
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
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/AVvXsEgJNnWga68iyU_B-KVO7RZOfsPhx2U4sJeFtbY48R4U8OyFdeCk9Ed2T0ciUi0D6VGQOkJRLm-U9R2DzMElwl98nSMeJt5_w5bMkfhtwRpv7jxWTkY4V63ariINKYEgIENUIIqSSLREmZA/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
ijin mempraktikkna sob..terus kalo membuat gambar selsalu transparaancy gmana???
BalasHapusJalan2 Disni Info Nya Keren2
BalasHapus