Cara Membuat Efek Gelap dan Terang Saat Hover Gambar/Image

Membuat gambar agar lebih gelap bisa kita atur dengan CSS.
Anda bisa mengatur action dari gambar gelap, mengatur seberapa gelap gambarnya dengan kode CSS Efek Gelap terang.

Lihat Juga: Membuat Pop Up ringan Subscribe Blog

Kode ini juga bisa kalian gunakan pada website kalian agar memiliki efek gelap pada gambar di setiap artikel.

Memberikan efek gelap pada gambar blog ini bisa kalian ikuti tutorialnya sebagai berikut.

Cara membuat efek gelap atau blur pada gambar/image di blogger dan kembali terang saat hover.

1. Masuk Blogger > Tema > Edit Tema
2. Carilah kode </head> dengan keyboard CTRL + F
3. Copy dan pastekan kode dibawah ini tepat diatas tag </head> yang kita cari tadi.

<style>
img {
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;}
img:hover {
filter:alpha(
opacity=100);
-moz-opacity:.0;
opacity:1.0;}
</style>

4. Done

Dengan ini semua gambar kalian yang ada pada blog akan menjadi blur dan saat hover akan menjadi terang kembali.

Sebagai contoh lihatlah gambar dibawah ini, dan lakukanlah hover efek blur akan terlihat.

Cara kerjanya sangat sederhana bukan.
Jika kalian tidak suka efek hovernya kalian hanya harus menghapus img:hover pada bagian CSS-nya dengan begitu efek hover tidak akan aktif.

Lihat juga: Cara Memasang Meta Deskripsi Di Blogger Yang Benar

Kalian juga bisa melakukan hal sebaliknya yaitu membuat gambar blur saat hover di blogger.

Cara membuat blur gambar saat hover dengan CSS di blogger

Cara ini adalah kebalikan dari cara pertama yaitu membuat efek blur dan kembali terang saat hover.

Cara kedua ini kiat akan membuat efek blur atau gelap saat hover.
Berikut source kode CSS-nya.

1. Masuk Blogger > Tema > Edit Tema
2. Carilah kode </head> dengan keyboard CTRL + F
3. Copy dan pastekan kode dibawah ini tepat diatas tag </head> yang kita cari tadi.

<style>
img {
filter:alpha(opacity=70);
-moz-opacity:.0;
opacity:1.0;}
img:hover {
filter:alpha(opacity=100);
-moz-opacity:0.7;
opacity:0.7;}
</style>

4. Done

Untuk contohnya kalian bisa hover pada gambar dibawah.

Mudah bukan membuat gambar blur saat dan bukan saat hover.
Dengan ini berakhirlah sudah tutorial membuat efek blur pada setiap gambar di blogger, semoga bermanfaat.

Terima kasih telah berkunjung.