How to make hover effect work for an icon in a css grid?

Question

I'm new to coding and was trying to make a component to preview/display a project I've been working on. I'm trying to make my links like the GitHubIcon and LaunchIcon have a :hover effect but it's not working when I try something like .linkItems:hover{background-color: red} or even when I try something completely different like .title:hover{background-color: red} . When I use the chrome dev tool, the hover doesn't work either unless I force it and when I don't force it, it just automatically grays out. It works when it's not in a css grid.

Component

    <li className={`${styles.gridContainer} ${props.className}`}>
      <div className={styles.imageWrapper}>
        <Image className={styles.image} src={props.imgSrc} alt="alt-picture" />
      </div>
      <div className={styles.projectContent}>
        <div className={styles.title}>
          <h2>{props.heading}</h2>
          <h1>{props.titleProject}</h1>
        </div>

        <div className={styles.projectDescription}>
          <SecondaryCard className={styles.descriptionCard}>
            {props.description}
          </SecondaryCard>
        </div>

        <ul className={styles.techStack}>
          {props.techStack.map((el) => {
            return (
              <li className={styles.techs} key={uuidv4()}>
                {el}
              </li>
            );
          })}
        </ul>

        <div className={styles.links}>
          <Link href={props.githubUrl}>
            <GitHubIcon className={styles.linkItems} />
          </Link>
          <Link href={props.deployUrl}>
            <LaunchIcon className={styles.linkItems} />
          </Link>
        </div>
      </div>
    </li>

CSS

    .gridContainer {
      display: grid;
      grid-template-columns: repeat(16, 1fr);
      list-style: none;
    }
    
    .gridContainer > div {
      position: relative;
    }
    
    .imageWrapper {
      grid-area: 1/3/-1/13;
      align-self: center;
      z-index: -1;
    }
    
    .projectContent {
      grid-area: 1/6/-1/15;
      align-self: center;
      text-align: right;
    }
    .title {
      color: var(--second-bg-heading);
    }
    
    .projectDescription {
      margin-top: 1rem;
    }
    
    .techStack {
      margin-top: 2rem;
      display: flex;
      justify-content: flex-end;
      color: var(--second-sub-headline);
    }
    
    .links {
      margin-top: 2rem;
    }
    
    .linkItems {
      margin-left: 5rem;
      transform: scale(2);
      color: var(--second-sub-headline);
      margin-right: 1rem;
    }
    
    .techs {
      list-style: none;
      margin-left: 1rem;
    }
    
    @media (max-width: 1200px) {
      .imageWrapper {
        opacity: 0.9;
        grid-column: 1/14;
      }
      .projectContent {
        transform: scale(0.9);
        grid-column: 7/17;
      }
    }
    
    @media (max-width: 768px) {
      .imageWrapper {
        opacity: 0.25;
        grid-column: 1/-1;
      }
    
      .image {
        border-radius: 10px;
      }
    
      .projectContent {
        grid-column: 1/-1;
        font-size: 1.5rem;
        text-align: left;
        align-self: center;
      }
    
      .title {
        padding: 0 3%;
        margin-bottom: 5%;
      }
    
      .projectDescription {
        margin: 3% 0;
        border-radius: 0;
        background-color: transparent;
        padding: 0 3%;
      }
    
      .techStack {
        justify-content: flex-start;
        padding: 0 3%;
        margin: 3% 0;
      }
    
      .techs {
        margin-right: 5%;
        margin-left: 0;
        margin-top: 0;
      }
    
      .links {
        padding: 0 10%;
        margin: 6% 0 6% 0;
        display: flex;
        justify-content: space-around;
      }
    
      .linkItems {
        margin-right: 0;
        margin-left: 0;
        transform: scale(2);
      }
    }
    
    @media (max-width: 600px) {
      .projectContent {
        transform: scale(0.8);
      }
    }
    
    @media (max-width: 480px) {
      .projectContent {
        font-size: 1rem;
      }
    }

Answer 1

I'm sorry if I wasted anyone's time. I figured it out and the z-index of my section was -2 so that's why the hover wasn't showing. I spent the whole day figuring this out.