Macam-macam Efek Hover Pada Gambar

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:

#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: