Cara membuat Blur CSS image hover effect di Blog

HaiSob apa kabar 😊 ? Di kesempatan ini saya akan berbagi Blur CSS image hover effect.

Banyak efek-efek yang bisa kamu gunakan untuk membuat gambar di postinganmu menjadi lebih menarik, Misalnya dengan menambahkan efek hover gambar seperti Blur image hover efek ini.

Blur Efek hover pada gambar di sini adalah efek yang muncul ketika pointer mouse ada di atas gambar pada postingan di blog kamu, dan gambar akan menjadi Blur.

Blur Image Hover Effect


Blur CSS image hover effect
Blur CSS image hover effect


Memasang Blur CSS image hover effect di Blogger


1. Di Blog Blogger 😀
2. Pilih menu Template ➔ Edit HTML
Blur CSS image hover effect
Template - Edit HTML

3. Letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </style>
.post-body img { -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }
.post-body img:hover { -webkit-filter:blur(5px); }
4. Save.

Cek gambar di postinganmu apa sesuai harapan atau tidak, jika tidak edit CSS diatas sesuaikan dengan CSS template blog kamu.

Sekian Blur CSS image hover effect, Salam Bloggers.