JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<img src="http://sergiobortotto.altervista.org/wp-content/uploads/2013/03/Abstract-005-resized.jpg" />
<script src="http://www.pixastic.com/lib/download/build.php?everything=true"></script>

CSS

body {
    margin:0;
    padding:0;
}
.masked{
    position:relative;
}
.masked .maskimg{
    z-index:200;
}
.blur{
    z-index:100;
}
.masked .maskimg, .blur{
    position:absolute;
    top:0px;
    left:0px;
}

JavaScript

(function ($) {
    $.fn.maskMe = function (maskimg) {

        return $(this).each(function (ind, elm) {
            var svg_start = '<svg width="400px" height="300px"><defs><mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><image width="400px" height="300px" xlink:href="' + maskimg + '"/></mask></defs><foreignObject width="100%" height="100%" style="mask: url(#mask);">';
            var svg_end = '</foreignObject></svg>';
            $(elm).wrap('<div class="masked"/>');
            var mask = $(elm).parent();
            var txt = $(mask).html();
            $(mask).html('<div class="maskimg">'+svg_start + txt + svg_end+'</div>');
            var img = $(txt);
            img.wrap('<div class="blur" />').appendTo(mask);
            img.pixastic("blurfast", {
                amount: 1.7
            }).wrap('<div class="blur" />');
        });
    }
})(jQuery);

$('img').maskMe("http://www.der-schepp.de/css-masking/mouse.png");