JSFiddle - React, Tailwind, and code Playground

by octavioamu

HTML

<script src="http://finom.ho.ua/blur/jquery.gaussian-blur.js"></script>
<div class="blur">
    <img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" alt="Kitten" />
</div>

CSS

.blur {display: inline-block; position: relative; overflow:hidden;}
.blur > .blurImage {position: absolute; top:0; left:0; z-index:1;}
.blur > [id^="blurred"] {position: absolute; top:0; left:0; z-index:0;}

JavaScript

$('.blur').gaussianBlur({
	deviation: 3, //level of blur
});