Macam Macam Efek Hover Pada Gambar

Kalian pasti pernah liat blog,ketika gambar nya di hover/cursor di arahkan,gambar tersebut akan berubah menjadi efek hitam putih,atau makin gelap. kenapa bisa begitu? karena blog tersebut sudah menerapkan efek ini,ada beberapa efek yang saya share kali ini,bisa kalian pilih sesuai kebutuhan

Untuk menerapkan efek ini sangat mudah. Silahkan pilih CSS berikut ini dan sesuaikan dengan kebutuhan blog Anda. Jika sudah ditentukan silahkan login ke blogger > template >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 penerapan nya:

<div id="efek-gambar">
<img class="blur" src="disini link gambar Anda" />
</div>

contoh hasil nya:










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

http://www.seocips.com/2015/11/9-efek-hover-sederhana-pada-gambar-di-blogspot.html