Tengo una lista de proyectos, de un lado pongo sus nombres, y del otro su imagen. Las imágenes están en posición absoluta.

Quiero cambiar el índice Z de una imagen cuando paso el cursor sobre el nombre del proyecto, ¿cómo lo logro?

Aquí está la página principal de trabajo:

 <main className='w-full h-full text-gray-50 text-lg py-32'> <div className='container flex content-center w-full h-full '> <header className='px-12 flex flex-col justify-center'> <h1 className='bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-yellow-600 text-8xl font-bold'> Recent Work </h1> <ul className='mt-12 flex flex-col gap-4'> {projectsData.map((project) => ( <WorkInfo key={project.id} project={project} /> ))} </ul> </header> <section className='px-12 flex-grow'> <div className='max-w-xs w-full h-full'> <ul className='relative w-full h-full'> {projectsData.map((project, index) => ( <WorkImage key={project.id} project={project} index={index} isHover={isHover} /> ))} </ul> </div> </section> </div> </main>

Aquí está el componente WorkImage, donde enumero las Imágenes de los proyectos:

 const WorkImage = ({ index, isHover, project }) => { return ( <li className={`absolute w-full h-full`}> <Image src={project.image} alt={project.title} layout='fill' blurDataURL placeholder='blur' className='w-full h-full object-cover' /> </li> ); };

Aquí está el componente WorkInfo, donde enumero los nombres de los proyectos:

 const WorkInfo = ({ project }) => { return ( <li key={project.id} className='max-w-xs group'> <a href={project.url} target='_blank' rel='noopener noreferrer' className='flex gap-1 items-center'> <div className='h-px w-0 group-hover:w-full bg-gray-50 transition-all duration-700'></div> <h3 className='whitespace-pre'>{project.title}</h3> </a> </li> ); };