如何仅对图像的圆圈部分进行着色

Question

我正在 elementor 上创建网站。从下面的代码开始，我试图确保鼠标悬停时只有一部分图像是彩色的，这是一种以圆形方式移除黑色滤镜的蒙版。

我发现了一个与我想问自己的问题非常相似的问题 (Is there any way to colorize only part of image on hover? / 27865389)，但我正在尝试从图像而不是 svg 构建代码

另一个例子可能是这个https://codepen.io/fontophilic/pen/XJpVje/唯一的区别是我在图像上方有一个徽标，它必须在鼠标悬停时消失

效果完成后，我将不得不为网站上的更多图片复制它

#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

您可以使用元素将图像嵌入 SVG 中：

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

完成后，您可以对图像执行任何操作，就像对普通 SVG 元素执行的操作一样。

如何仅对图像的圆圈部分进行着色

How can a colorize only a circle part of images

javascript

jquery

mask

mousehover

elementor