I'm currently facing an issue with a design that involves a 6-column grid and text placed in front of it. The requirement is that when I hover over the text, the background of the corresponding grid column should change to an image. While this functionality works well, I am struggling with hovering behind the text, which seems impossible. Is there any solution available for this? Thank you!
const [disappear, setDisappear] = 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((element, index) => (
<div
key={index}
className="bg-black relative"
onMouseEnter={() => setDisappear((prev) => [...prev, index])}
>
{disappear.some((el) => el === index) && (
<Image src={element} alt="background" layout="fill" />
)}
</div>
))}
</div>
</div>
</PageLayout>
Currently utilizing next js for this project, thank you.