Membuat efek gelap dan terang pada gambar posting

Pada saat blogger menulis suatu artikel, biasanya tidak terlepas dari image sebagai pelengkap artikel yang bertujuan untuk memberikan keterangan/penjelasan artikel atau sebagai pelengkap. Sebenarnya gambar/image pada postingan bisa diberikan sedikit efek tambahan untuk mempercantik tampilannya dengan memanfaatkan efek hover. Saat mouse pointer berada pada gambar maka akan terlihat suatu perubahan dimana gambar yang awalnya terlihat terang akan berubah menjadi gelap. Bagi sobat yang mau mencoba silahkan ikuti tips sederhana berikut ini.

1. Login ke blogger
2. Pilih rancangan, edit HTML
3. Centang expand template widget
4. Tekan Crtl-F dan cari kode ]]></b:skin>
5. Copy paste kode dibawah ini dan letakkan diatas kode ]]></b:skin> tadi

Kode css terang menjadi gelap:

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6} .post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

Kalau sobat mau merubah efek tersebut dari gelap menjadi terang, sobat tinggal membalikkan penempatan kodenya saja seperti di bawah ini:

.post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1} .post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

6. Simpan dan coba jalankan untuk melihat hasilnya

Demikian tips sederhana untuk memberikan efek terang/gelap pada image postingan, semoga berguna dan bisa memberikan nuansa indah pada image postingan sobat. Salam.

Artikel Terkait Lainnya