Simple Hover Effect. Apa itu efek hover pada gambar? efek hover pada gambar adalah efek yang muncul ketika kursor mouse pengguna di arahkan pada gambar. Pada kesempatan ini saya akan membagikan 9 efek hover sederhana pada gambar, efek-efek ini seperti saturate, grayscale, contrast, brightness, blur, invert, sepia, huerotate, opacity.

9 Efek Hover Sederhana Pada Gambar di Blog




Kemarin juga saya sudah membagikan cara membuat gambar di postingan menjadi putih hitam dan 8 efek hover pada gambar, bonus untuk saat ini ada 9 efek hover pada gambar. Ok, berikut ini adalah cara membuat...

Efek Hover Sederhana Pada Gambar

Masukan css di bawah ini di atas  ]]></b:skin>  atau diatas </style>.
#gambar-seocips a img:hover { -webkit-filter:none; /*Returns to default state*/; }
#gambar-seocips a img.brightness:hover { -webkit-filter:brightness(0); }
.saturate { -webkit-filter:saturate(3); }
.grayscale { -webkit-filter:grayscale(100%); }
.contrast { -webkit-filter:contrast(160%); }
.brightness { -webkit-filter:brightness(0.25); }
.blur { -webkit-filter:blur(3px); }
.invert { -webkit-filter:invert(100%); }
.sepia { -webkit-filter:sepia(100%); }
.huerotate { -webkit-filter:hue-rotate(180deg); }
.opacity { -webkit-filter:opacity(50%); }
Untuk penerapan pada gambar misalnya:
<div id="gambar-seocips">
<img src="ini diisi dengan link gambar milikmu" class="saturate" />
</div>
Untuk mengganti efek-efeknya ganti saturate  dengan nama element css yang ingin kamu gunakan efeknya, misalnya ganti dengan: grayscale atau contrast atau brightness dan nama-nama diatas yang lain.
0 Komentar untuk "9 Efek Hover Sederhana Pada Gambar di Blog"