DIV on top of background

Question

I found a very interesting image grid background on Codepen, that I'd like to use. Only thing is i'm experiencing issues with getting a DIV on top of it.

https://codepen.io/pirolab/pen/qmeNqY

I've tried things such as top, z-index, but for some reason I'm struggling to get anything to be on top of the images.

Example of something I've tried

<section class="o-hero">
  <div class="o-cards__main">
  <div style="z-index:999;top:5;background:blue">Hello<div>
    <div class="o-cards__container" id="container">
    </div>
  </div>
</section>

I'd really appreciate it if someone could help.

Answer 1

https://codepen.io/andrasadam93/pen/KyNvoe forked from yours if I understood your query correctly. The key parts are these (although I added some extra for visibility):

<section class="o-hero">
  <div class="overlay">
    <p>This is overlay</p>
  </div>
  <div class="o-cards__main">
    <div class="o-cards__container" id="container"></div>
  </div>
</section>


.overlay{
  position:absolute;
  z-index:999;
  width: 100%;
  height: 100%;
  font-size: 24px;
  font-weight:700;
  color:#ff0000;
  display:flex;
  align-items:center;
  justify-content:center;
}