JSFiddle - React, Tailwind, and code Playground

by CyberAP

HTML

<div class="item">
    <img src="https://www.wikihow.com/images/thumb/2/25/Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg/aid8673811-v4-728px-Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg" alt="" />
</div>

CSS

.item
{
  float: left;
  width: 200px;
}

.item img
{
  max-width: 100%;
  transition: filter 250ms ease-in-out;
  filter: blur(0.2px);
  image-rendering: -webkit-optimize-contrast;
}

.item:hover img
{
  filter: blur(2px);
}