Estoy trabajando en la creación de un sitio en elementor. Comenzando con el código a continuación, estaba tratando de asegurarme de que al pasar el mouse solo se colorea una parte de la imagen, una especie de máscara que elimina el filtro negro que ahora está en forma circular.
Encontré una pregunta muy similar a lo que estoy tratando de hacerme ( ¿Hay alguna forma de colorear solo una parte de la imagen al pasar el mouse? / 27865389), pero estoy tratando de construir el código a partir de una imagen y no un svg
Otro ejemplo podría ser este https://codepen.io/fontophilic/pen/XJpVje/ la única diferencia es que tengo un logotipo encima de la imagen que debe desaparecer al pasar el mouse
Una vez hecho el efecto, tendré que replicarlo para obtener muchas más imágenes en el sitio.
#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>Puede incrustar una imagen en un SVG muy bien, usando el elemento <image>:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image
Una vez que haya hecho eso, puede hacer cualquier cosa con la imagen que haría con un elemento SVG normal.