JSFiddle - React, Tailwind, and code Playground

HTML

<div><img src="https://beta.orkneypestcontrol.co.uk/assets/associate/bpca.png" alt="some image" /></div>

CSS

div {
    position: relative;
}

div img {
    position: absolute;
    top:0;
    left:0;
    
    transition: opacity 0.3s ease-in;
    -moz-transition: opacity 0.3s ease-in;
    -webkit-transition: opacity 0.3s ease-in;
}
div:hover img:nth-child(2){
    opacity: 0;
}

JavaScript

var desaturate = function( img,opacity ){
    
    var canvas = document.createElement('canvas'),
        canvasContext = canvas.getContext('2d'),
        imgW = img.width,
        imgH = img.height,
        opacity = opacity || 3,
        imgPixels,
        i, avg;
    
    canvas.width = imgW;
    canvas.height = imgH;
    canvasContext.drawImage( img,0,0 );

    imgPixels = canvasContext.getImageData( 0,0,imgW,imgH );

    for(var y = 0; y < imgPixels.height; y++){
         for(var x = 0; x < imgPixels.width; x++){
              i = (y * 4) * imgPixels.width + x * 4,
              avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / opacity;
              imgPixels.data[i] = avg;
              imgPixels.data[i + 1] = avg;
              imgPixels.data[i + 2] = avg;
         }
    }
    
    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

    return canvas.toDataURL();
 
}

var newImg = document.createElement("img");

newImg.src = desaturate( document.getElementsByTagName("img")[0],3 );

document.getElementsByTagName("div")[0].appendChild( newImg );