En el proyecto de React, antes no funciona pero después sí funciona.
Cuando se pasa el mouse antes del efecto, no se ve el fondo. Pero después del efecto, el fondo funciona. Intenté de diferentes formas. También use z-index pero tampoco funciona.
.img-hover {
position: relative;
overflow: hidden;
}
.img-hover img {
transition: 0.4s ease-in-out;
cursor: pointer;
}
.img-hover::after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(17, 17, 17, 0.294);
content: '';
transition: all ease-in-out 0.7s;
cursor: pointer;
}
.img-hover:hover::after {
top: 0;
left: 0;
width: 0;
height: 0;
}
.img-hover::before {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(17, 17, 17, 0.294);
content: '';
transition: all ease-in-out 0.7s;
}
.img-hover:hover::before {
bottom: 0;
right: 0;
width: 0;
height: 0;
}
Pero el código no funciona. Intenté encontrar una solución pero…
davy.ai
No puedo entender el problema exacto sin más información, como el código HTML y el comportamiento deseado. Sin embargo, aquí hay algunos pasos generales de resolución de problemas que podrían ayudar: