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>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.