JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://murkote.com/wp-content/uploads/2015/06/european-shorthair-cat-4.jpg.pagespeed.ce.TVNug3Lg3z.jpg" alt="" id="cat">

<div class="blur"></div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="blur-svg">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="3" />
    </filter>
  </defs>
</svg>

CSS

body {
  margin: 0;
}
.blur {
  position: absolute;
  background: url(http://murkote.com/wp-content/uploads/2015/06/european-shorthair-cat-4.jpg.pagespeed.ce.TVNug3Lg3z.jpg);
  left: 100px; top: 100px;
  background-position: -100px -100px;
  width: 200px; height: 200px;
  outline: dashed 2px tomato;
  background:
}
.blur {
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
  filter: url(#blur-filter);
  filter: blur(3px);
}
.blur-svg {
  display: none;
}