Hover behind an element in react js

I'm having trouble with a design that consists in a 6 columns grid and a text ahead it. When I hover the text, the grid child has to change its background to an image (only the column hovered). It works fine, but I have the problem hovering behind the text... it seems impossible. Is there any solution? thanks!

  const [dissapear, setDissapear] = useState([20]);
  return (
    <PageLayout
      className="bg-softBlack"
    >
      <div className="relative h-[480px]">
        <h1
          className="absolute top-32 uppercase bg-transparent text-gray-10 text-[9.028vw] leading-[0.9] tracking-[-0.06em]"
          style={{ zIndex: 1000, mixBlendMode: "difference" }}
        >
          welcome <br />
          to the LAB.
        </h1>
        <div className="w-full h-full absolute left-0 top-0 grid grid-cols-6">
          {array.map((e, idx) => (
            <div
              key={idx}
              className="bg-black relative"
              onMouseEnter={() => setDissapear((prev) => [...prev, idx])}
            >
              {dissapear.some((e) => e === idx) && (
                <Image src={e} alt="background" layout="fill" />
              )}
            </div>
          ))}
        </div>
      </div>
    </PageLayout>

I'm using next js, thanks