I have a list of projects, on one side I list their names, and on the other their image. The images are in absolute position.

I want to change the Z-index of an image when I hover over the project name, how do I achieve it?

Here is the main Work Page:

<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>

Here is the WorkImage component, where I list the Images of the projects:

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>
  );
};

Here is the WorkInfo component, where I list the names of projects:

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>
  );
};