
Oleh
Bungfrangki
·

Artikel kali ini saya akan berbagi sebuah kode CSS tentang efek hover pada gambar untuk blogspot/blogger. Efek hover ini akan terlihat saat bidang gambar pada blog dilewati atau diletaki kursor atau dengan teknik permainan CSS lainnya.
Penerapan efek hover pada gambar dimaksudkan untuk memperindah tampilan blog, juga mempertahankan link tertentu agar lebih detail.
Tutorial sebelumnya: Memperbaiki Ukuran Thumbnail pada Widget Popular Post Terbaru
Untuk menerapkan efek ini sangat mudah. Silahkan pilih CSS berikut ini dan sesuaikan dengan kebutuhan blog Anda. Jika sudah ditentukan, silahkan masuk ke dasbor blogger > Edit HTML lalu tambahkan CSS-nya pada bidang gambar yang ingin diberi efek.
Berikut contoh CSS untuk masing-masing efek hover pada gambar:
Contoh penerapannya:
Contoh hasilnya:









Demikian tutorial blogger kali ini tentang macam-macam efek hover pada gambar. Semoga berguna untuk blog Anda.

Tutorial sebelumnya: Memperbaiki Ukuran Thumbnail pada Widget Popular Post Terbaru
Untuk menerapkan efek ini sangat mudah. Silahkan pilih CSS berikut ini dan sesuaikan dengan kebutuhan blog Anda. Jika sudah ditentukan, silahkan masuk ke dasbor blogger > Edit HTML lalu tambahkan CSS-nya pada bidang gambar yang ingin diberi efek.
Berikut contoh CSS untuk masing-masing efek hover pada gambar:
#efek-gambar a img:hover { -webkit-filter:none; /*Returns to default*/; }
#efek-gambar a img.brightness:hover { -webkit-filter:brightness(0); }
.blur { -webkit-filter:blur(3px); }
.contrast { -webkit-filter:contrast(160%); }
.grayscale { -webkit-filter:grayscale(100%); }
.huerotate { -webkit-filter:hue-rotate(180deg); }
.invert { -webkit-filter:invert(100%); }
.opacity { -webkit-filter:opacity(50%); }
.saturate { -webkit-filter:saturate(3); }
.sepia { -webkit-filter:sepia(100%); }
.brightness { -webkit-filter:brightness(0.25); }
Contoh penerapannya:
<div id="efek-gambar">
<img class="blur" src="disini link gambar Anda" />
</div>
Contoh hasilnya:

Blur

Contrast

Grayscale

Huerotate

Invert

Opacity

Saturate

Sepia

Brightness
Demikian tutorial blogger kali ini tentang macam-macam efek hover pada gambar. Semoga berguna untuk blog Anda.
Source: http://www.seocips.com/2015/11/9-efek-hover-sederhana-pada-gambar-di-blogspot.html
Baca Juga:
Share this
Posting Komentar
Komentar telah ditutup. Jika ada yang perlu disampaikan terkait konten ini, silahkan kirim pesan lewat laman kontak.