Multiplied background and Z-Index Problem

Question

I have a list of thumbnails with a title on top of them. The background of the title should be multiplied on the image behind, but not the text.

HTML:

<a href="#" class="thumbslink">
  <figure>
    <img src="imagelink" />
  </figure>
  <div class="title-wrapper">
    <div class="title">
      <span class="background"></span>
      <p> Title </p>
    </div>
  </div>
</a>

CSS:

a.thumbslink {
  position: relative;
}

a.thumbslink figure {
 aspect-ratio: 3/2;
 position: relative;
}

img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div.title-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.title {
  position: relative;
}

div.title p {
  color: white;
  font-size: 3em;
  line-height: 1;
  width: auto;
  z-index: 1;
  padding: 1rem;
}

div.title span.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  background-color: red;
  mix-blend-mode: multiply;
  z-index: 0;
}

But the <span class="background"> element keeps sitting on top of everything, multiplying red color over the image and the title, even if its z-index says it should be behind the title and the title element is rendered after the background span.

Working with :before and :after pseudo-elements didn't solve the problem.

What can I do? Thank you.

Answer 1

This isn't quite a full explanation as I don't know enough about the relationship between z-index and parent/child elements.

So one simple fix to deal with annoying z-index issues is to assign a value of -1 to an element to force it to a lower priority. However, doing that by itself would cause your red background element to go behind all other elements on the page. So in order to keep it above the image, we need the parent element of our red background to also have its z-index set to a value that would keep it above the image.

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; } figure { margin: 0; } img { position: absolute; width: 100%; height: 100%; object-fit: cover; } div.title-wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } div.title { position: relative; z-index: 1; } div.title p { color: white; font-family: sans-serif; font-size: 3em; line-height: 1; width: auto; font-weight: bold; z-index: 1; padding: 1rem; } div.title span.background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 2rem; background-color: red; z-index: -1; }

 <a href="#" class="thumbslink"> <figure> <img src="https://picsum.photos/seed/picsum/200/300" /> </figure> <div class="title-wrapper"> <div class="title"> <span class="background"></span> <p> Title </p> </div> </div> </a>