CODEWITHSUNDEEP
htmlcss
GameKyuubi
GameKyuubi

Reputation: 731

Why is div background opaque?

I have an index.html that has a video background, a threejs model, and links in four corners. I now want to add a lightbox gallery page using this example: https://codepen.io/gschier/pen/HCoqh I can get the proper placement, but the gallery/row div background is opaque instead of transparent. I'd like it to be transparent so the user can see the background. Note that if I move the <video> above the gallery div in the .html file the video obscures the images despite the z-index being higher; I have a feeling that might have something to do with the problem.. What am I doing wrong here?

If I cut it down to just one image the problem is easy to see with a screenshot: screenshot

html, body, .overlay, .container, #video {
  width:100%;
  height:100%;
}

body {
  margin:0;
  overflow:hidden;
}

.container {
  position:static;
}

#video {
  position:absolute;
  z-index:0;
  object-fit:fill;
}

.overlay {
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}

.upper-right {
  right:0;
  top:0;
}

.lower-right {
  right:0;
  bottom:0;
}

.upper-left {
  left:0;
  top:0;
}

.lower-left {
  left:0;
  bottom:0;
}

.link-text {
  z-index:3;
  position:absolute;
  color:white;
  font-family:'Helvetica';
  font-weight:bold;
  margin:20px;
  font-size:larger;
}

.gallery {
  z-index:4;
  position:static;
}

/** LIGHTBOX MARKUP **/

.lightbox {
  /** Default lightbox to hidden */
  display: none;

  /** Position and style */
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  max-height: 80%;
  margin-top: 2%;
}

.lightbox:target {
  /** Remove default browser outline */
  outline: none;

  /** Unhide lightbox **/
  display: block;
}
<!DOCTYPE html>
<html>
  <head>
    <title>kc</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="gallery">
        <div class="row">
          <!-- thumbnail image wrapped in a link -->
          <a href="#img1">
            <img src="img/1.png" class="thumbnail">
          </a>
          <!-- lightbox container hidden with CSS -->
          <a href="#_" class="lightbox" id="img1">
            <img src="img/1.png">
          </a>
        </div>
      </div>
      <video loop autoplay muted id="video">
        <source src="clouds.mp4" type="video/mp4">
      </video>
      <a class="upper-right link-text">
        upper-right
      </a>
      <a class="lower-right link-text">
        lower-right
      </a>
      <a href="gallery.html" class="upper-left link-text">
        gallery
      </a>
      <a class="lower-left link-text">
        lower-left
      </a>
    </div>
  </body>
</html>

Upvotes: 0

Views: 73

Answers (1)

GameKyuubi
GameKyuubi

Reputation: 731

I figured it out. I had to set the gallery position to relative. Apparently static elements ignore z-index.

Upvotes: 1

Related Questions