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…