JSFiddle - React, Tailwind, and code Playground

by Nofiden Noble

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://okfoc.us/okzoom/src/okzoom-1.0.min.js"></script>
<body>
    <h1>Working</h1>
    <image src="http://www.cpplcounseling.com/uploads/4/6/8/2/46828361/2181364_orig.jpg" class="img-responsive" width="50%" name="ipsDF14-2-29Feb16-9d80-1a94a2e8c121" style="-webkit-filter: brightness(100%) contrast(100%) invert(0%) saturate(100%);">
    <h1>Not Working[Without removing svg fiters how to make the below work?]</h1>
    <svg style="overflow: hidden; height: 637px; width: 546px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
        <defs>
            <filter id="svgBlur" width="110%" height="110%">
                <feComponentTransfer id="bFilter">
                    <feFuncR id="brightness1" class="brgt" type="linear" slope="1"></feFuncR>
                    <feFuncG id="brightness2" class="brgt" type="linear" slope="1"></feFuncG>
                    <feFuncB id="brightness3" class="brgt" type="linear" slope="1"></feFuncB>
                </feComponentTransfer>
                <feComponentTransfer id="cFilter">
                    <feFuncR id="contrast1" class="cnst" type="linear" slope="1" intercept="-0.01"></feFuncR>
                    <feFuncG id="contrast2" class="cnst" type="linear" slope="1" intercept="-0.01"></feFuncG>
                    <feFuncB id="contrast3" class="cnst" type="linear" slope="1" intercept="-0.01"></feFuncB>
                </feComponentTransfer>
                <feComponentTransfer id="gFilter">
                    <feFuncR id="gamma1" class="gama" type="gamma" amplitude="1" exponent="1" offset="0"></feFuncR>
                    <feFuncG id="gamma2" class="gama" type="gamma" amplitude="1" exponent="1" offset="0"></feFuncG>
                    <feFuncB id="gamma3" class="gama" type="gamma" amplitude="1" exponent="1" offset="0"></feFuncB>
               ...

JavaScript

$(document).ready(function() {

  				$("img").okzoom({
					width: 150,
			        height: 150,
			        scaleWidth: 2000,
			        border: "2px solid #fff",
			        shadow: "0 0 5px #fff",
					cursor:"pointer"
			    });	
            				$("image").okzoom({
					width: 150,
			        height: 150,
			        scaleWidth: 2000,
			        border: "2px solid #fff",
			        shadow: "0 0 5px #fff",
					cursor:"pointer"
			    });	
  
});