JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<img...

CSS

canvas {
position: absolute;
top: 0; 
left: 0;
-webkit-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
div {
position:relative;
}
 
canvas:hover {
opacity: 0;
}

JavaScript

(function() {
 var supportsCanvas = !!document.createElement('canvas').getContext;

 function greyImages(cva,img) {
    
    var ctx =cva.getContext('2d');
    var imageData, px, length, i = 0,
    red, green, blue, grey;

    ctx.drawImage(img, 0, 0);

    imageData = ctx.getImageData(0, 0, cva.width, cva.height);
    px = imageData.data;
    length = px.length;

    for ( ; i < length; i+= 4 ) {
       // rgba
       grey = 0.3*px[i] + 0.59*px[i+1] + 0.11*px[i+2];
       px[i] = px[i+1] = px[i+2] = grey;
    }

    ctx.putImageData(imageData, 0, 0);
 }
    $(document).ready(function(){
        $('.icono').each(function(){
            var _this = $(this);
            var _canvas = $(document.createElement('canvas')); 
            _canvas.width(_this.width());
            _canvas.height(_this.height());
            _canvas.attr('width',_this.width());
            _canvas.attr('height',_this.height());
            _canvas.css('top',_this.position().top);
            _canvas.css('left',_this.position().left);
            _this.after(_canvas);
            greyImages(_canvas.get(0),_this.get(0));            
        });            
    });
})();