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

Question

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>

I tried your example, even by adding a proper image, but I can't recreate your problem. If could adding a screenshot of the issue would really help. Thanks :) — Vijay Dev, May 22 '21 at 02:38
Hi Vijay, thanks for having a look. I have added a screenshot of the problem. Please note, that if the image:hover is not active, images remain behind the fixed header. — mariaalouisaa, May 23 '21 at 10:11
Amazing, that did the job - thanks so much Vijay. Also, that's great to know, I shall keep my z-index values positive from now on. Thanks again, Maria — mariaalouisaa, May 25 '21 at 11:46
Can you please mark the answer as correct so in future anyone can check what caused the issue? Thanks :) — Vijay Dev, May 25 '21 at 12:36
@mariaalouisaa How did you resolved this issue? in my case I am also facing same but the difference is I have table with fixed header, one of the column has icon on icon hover we show tooltip and it getting hidden behind — Dreamer, Jul 13 '23 at 14:20

Vijay Dev · Accepted Answer · 2021-05-23T14:24:49.710

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.

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

1 Answers1