JSFiddle - React, Tailwind, and code Playground

by Paulie_D

HTML

<img id="one" src="http://3.bp.blogspot.com/-OinwTnYK4Ns/U0Ai0rz4DGI/AAAAAAAAAbI/d2iWyYYqQls/s1600/Dynamite.png" alt="">
<img id="two" src="http://3.bp.blogspot.com/-OinwTnYK4Ns/U0Ai0rz4DGI/AAAAAAAAAbI/d2iWyYYqQls/s1600/Dynamite.png" alt="">
<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="brightness">
        <feComponentTransfer>
            <feFuncR type="linear" slope=".5" />
            <feFuncG type="linear" slope=".5" />
            <feFuncB type="linear" slope=".5" />
        </feComponentTransfer>
    </filter>
</svg>
<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="contrast">
        <feComponentTransfer>
            <feFuncR type="linear" slope="2" intercept="-(0.5 * 2) + 0.5" />
            <feFuncG type="linear" slope="2" intercept="-(0.5 * 2) + 0.5" />
            <feFuncB type="linear" slope="2" intercept="-(0.5 * 2) + 0.5" />
        </feComponentTransfer>
    </filter>
</svg>

CSS

img {
    width:250px;
}
#one:hover {
    -webkit-filter:brightness(50%);
    -moz-filter:brightness(50%);
    filter: url(#brightness);
    filter:brightness(50%);
}
#two:hover {
    -webkit-filter:contrast(200%);
    -moz-filter:contrast(200%);
    filter: url(#contrast);
    filter:contrast(200%);
}