How can a colorize only a circle part of images

Question

I'm working on creating a site on elementor. Starting from the code below I was trying to make sure that with the mouse hover only a part of the image is colored, a kind of mask that removes the black filter that is now in a circular way.

I found a question very similar to what I'm trying to ask myself (Is there any way to colorize only part of image on hover? / 27865389), but I'm trying to build the code from an image and not a svg

Another example could be this https://codepen.io/fontophilic/pen/XJpVje/ the only difference is that I have a logo above the image that must disappear on the mousehover

Once the effect is done I will have to replicate it for many more images on the site

#logomuse {
        position: absolute;
        z-index: 10;
    }
    
    .musebox:hover #logomuse {
        opacity: 0%;
    }
    
    #musedescrizione{
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity .4s linear;
        
    }
    
    .musebox:hover #musedescrizione{
        visibility: visible;
        opacity: 1;
        
    }
    
    .immagineboxmuse {
        filter: brightness(0.3) grayscale(100%);
        
    }
    
    .musebox:hover .immagineboxmuse {
        filter: brightness(1.0) grayscale(0%);
        
    }

    .musebox {
        transition: transform .4s;    
    }
    
    .musebox:hover {
        cursor: none;      
    }

<div class="musebox"><img id="logomuse" src='https://upload.wikimedia.org/wikipedia/commons/4/49/BBC_logo_white.svg'>
<div id="museboxprogetto2"></div>
<img class="immagineboxmuse" src='https://buffalo-niagaragardening.com/wp-content/uploads/2020/09/sunflower-square-400px-Stofko.jpg'>
</div>

Answer 1

You can embed an image into an SVG just fine, using the <image> element:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

Once you've done that, you can do anything with the image that you'd do to a normal SVG element.