JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jsdelivr.net/pixastic/0.1.3/pixastic.all.js"></script>
<img src="http://2.bp.blogspot.com/-9dLI0ftUmLQ/ThbsG5Ld3UI/AAAAAAAAPtk/gDr_lfaxD3Q/s1600/angelina_jolie__73_.jpg" filter="blur" />

CSS

body {
    margin:0;
    padding:0;
}
.blur {
    visibility: hidden;
    position:relative;
}
.blur .lens-wrap {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:200;
    overflow:hidden;
}
.blur .lens {
    display:none;
    width:50px;
    height: 50px;
    border:1px solid rgba(0, 0, 0, 0.5);
    box-shadow:0px 0px 10px #333;
    position:absolute;
    top:0;
    left:0;
    /*border-radius:100%;*/
    z-index:100;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
[filter="blur"] {
    visibility:hidden;
}

JavaScript

(function ($) {
    $.fn.clearLens = function (lensproperty) {

        return $(this).each(function (ind, elm) {
            if ($(elm).attr('filter') == 'blur') {
                var w = 50;
                var h = 50;
                var blur = 2;

                if (lensproperty && lensproperty.width) w = lensproperty.width;
                if (lensproperty && lensproperty.height) h = lensproperty.height;
                if (lensproperty && lensproperty.blur) blur = lensproperty.blur;

                $(elm).wrap('<div class="blur" />');

                var wrapper = $('<div class="lens-wrap"/>').width($(elm).width()).height($(elm).height());
                wrapper.appendTo($(elm).parent());


                var lens = $('<div class="lens"/>').css('background', 'url(' + $(elm).attr('src') + ') no-repeat 0 0').width(w).height(h);
                lens.appendTo(wrapper);

                var endL = $(wrapper).width() - w;
                var endT = $(wrapper).height() - h ;

                $(wrapper).on('mousemove', function (e) {
                    lens.show();
                    var l = e.pageX - $(this).offset().left;
                    var t = e.pageY - $(this).offset().top;
                    lens.css({
                        left: l + 'px',
                        top: t + 'px',
                            'background-position': '-' + l + 'px -' + t + 'px'
                    });
                });

                $(wrapper).on('mouseout', function (e) {
                    lens.hide();
                });

                $(elm).parent().css('visibility', 'visible');

                $(elm).pixastic("blurfast", {
                    amount: blur
                });
            }
        });
    }
})(jQuery);

$('img').clearLens({
    width: 200,
    height: 200,
    blur: 3
});