JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <!-- current implementation -->
    <img width="90%" height="90%" class="blurry" src="http://www.nothrem.cz/images/avatar2.jpg">
    <svg height="90%" width="90%" class="blurry"><image filter="url(#blur)" xlink:href="http://www.nothrem.cz/images/avatar2.jpg" src="http://www.nothrem.cz/images/avatar2.jpg" height="100%" width="100%" />
    </svg>
    <svg id="svg-blur-effect" style="display:none">
    <filter id="blur"><feGaussianBlur stdDeviation="10" in="SourceGraphic"/></filter>
    </svg>
    <br>
    <!-- working implementation - but changes HTML -->
    <span class="img-wrapper">
      <img width="90" height="90" class="blurry" src="http://www.nothrem.cz/images/avatar2.jpg">
      <svg height="90" width="90" class="blurry"><image filter="url(#blur)" xlink:href="http://www.nothrem.cz/images/avatar2.jpg" src="http://www.nothrem.cz/images/avatar2.jpg" height="100%" width="100%" />
      </svg>
      <span class="overlay"></span>
    </span>

CSS

/* current implementation */
    img.blurry {
      display: block;
      visibility: hidden; /* prevent image displaying non-blurry on IE10+ before browser can be detected */
      -webkit-filter: blur(10px); /* supported in newest webkit */
      -moz-filter: blur(10px); /* possible support for future versions */
      -o-filter: blur(10px); /* possible support for future versions */
      -ms-filter: blur(10px); /* IE10+ */
      filter: blur(10px); /* basic CSS3 definition */
      filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10'); /* IE4 - 9; must be last otherwise it may be overriden by CSS blur filter */
    }
    svg.blurry {
      display:none;
    }
    
    .ie img.blurry { display: none; }
    .ie svg.blurry { display: block; }
    .blurry.visible { visibility: visible; }
    
    /* working implementation by changing HTML */
    .img-wrapper { display: block; float: left; position: relative; }
    .overlay {
      position: absolute;
      display: block;
      left: 0; top: 0; right: 0; bottom: 0;
      width: 100%;
      height: 100%;
      background: transparent url('http://images.nothrem.cz/question_mark.png') no-repeat center center;
      background-image: -webkit-linear-gradient(transparent, transparent), url('http://images.nothrem.cz/question_mark.svg');
      background-image: linear-gradient(transparent, transparent), url('http://images.nothrem.cz/question_mark.svg');
      background-size: contain;
    }

JavaScript

$(function() {
      if (-1 < navigator.userAgent.indexOf('MSIE')
       || -1 < navigator.userAgent.indexOf('Trident/')
       || -1 < navigator.userAgent.indexOf('Edge/')) {
           $('body').addClass('ie');
       }
       $('.blurry').addClass('visible');
    })