Blurry Image Test

Samik Pal ... menit baca

Updated: 28 October 2025

Published: 9 September 2023

Smaller Default Bigger

Creating Blurry Image Effect using HTML and CSS only!

Hover Mouse over the image to see it!

Code for this is given below!

<div class="separator" style="clear: both; text-align: center;">
  <img
    alt="enter_alt"
    border="0"
    src="img_url"
    title="enter_alt"
    width="100%"
    loading="lazy"
    class="blurry-image"
  />
</div>
<style>
    .blurry-image {
    filter: blur(8px);
  }

  .blurry-image:hover {
    filter: none;
  }
</style>

⚠️

Sensitive Content

Click to View

Dengarkan

Pilih Suara

Kecepatan1x

* Mengubah pengaturan akan membuat artikel dibacakan ulang dari awal.

Posted by:

Samik Pal

I like to read and learn new things on different topics, and then share them in my Blog.