image:hover with opacity not staying behind my fixed header?

I am having trouble trying to work something out. I have added some opacity to my "image:hover", however with this activated it seems to override my fixed header. I have tried putting the header on a "z-index: 0;" and the image on a "z-index; -1" but still no luck.

(Please note, this is very much still a work in progress...)

Thanks in advance

Here is a screenshot to show what I mean

body {
  background: black;
  color: white;
  font-family: monospace;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background: rgb(247, 40, 40);
  margin: 0;
  z-index: 0;
}

.nav-link,
.project-title,
p {
  text-align: center;
}

#welcome-section {
  width: 100%;
  height: 100vh;
}
h1 {
  padding-top: 140px;
  text-align: center;
  font-size: 80px;
  margin-bottom: 0;
}
.sub-title {
  text-align: center;
}
a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}
#proj-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.proj-img {
  max-height: 20em;
  margin: 0 20px;
  z-index: -1;
}

.proj-img:hover {
  opacity: 60%;
}

@media (max-width: 400px) {
  h1 {
    font-size: 15px;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=
    , initial-scale=1.0"
    />
    <title>Maria Castro | Portfolio</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav id="nav-bar">
        <a class="nav-link" href="#projects">Work</a>
        <a class="nav-link" href="#contact">Contact</a>
      </nav>
    </header>
    <section id="welcome-section">
      <h1>Hi, I'm Maria Castro.</h1>
      <p class="sub-title">Junior Front End Developer</p>
    </section>
    <section id="projects">
      <h2 class="project-title">My work</h2>
      <div id="proj-flex">
        <div id="project-1" href="#">
          <a href="https://ki05u.csb.app/" target="_blank">
            <img class="proj-img" src="images/weatherapp1.jpg" />
          </a>
          <p>Weather Widget</p>
        </div>
        <div id="project-2">
          <a
            href="https://codepen.io/mariaalouisaa/full/rNyLjYa"
            target="_blank"
            ><img class="proj-img" src="images/techdoc.jpg" />
          </a>
          <p>Technical Doc</p>
        </div>
        <div id="project-3" href="#">
          <a href="https://rzgbb.csb.app/" target="_blank"
            ><img class="proj-img" src="images/weatherapp2.jpg"
          /></a>
          <p>Weather App</p>
        </div>
      </div>
    </section>
    <section id="connect">
      <a class="connect-link" id="profile-link" href="#">LinkedIn</a>
      <a class="connect-link" href="#">FCC</a>
      <a class="connect-link" href="#">Codepen</a>
    </section>
  </body>
</html>

Solution

Thanks for the screenshot, it helped me to recreate the issue at my local. I solved the issue by removing the z-index values on header and .proj-img:

header { 
  /* remove z-index */
  /* z-index: 0; */
}
.proj-img { 
  /* remove z-index */
  /* z-index: -1; */
}

I still don't know how removing these z-index helps solve the problem, but generally speaking using values less than one is not ideal. Just to make sure that the header is always on top of everything else, you can do something like this:

// HTML
<header class="header" />
<div class="container">
  // rest of the content inside this div

// CSS
.header {
  position: fixed;
  z-index: 3;
}
.container {
  position: relative;
  z-index: 2;
}

Since the index value of .container parent is lower than .header, any element inside the container, even if they have z-index higher than three (3); .header will be always above.