Text to be clipping mask of Div background

Question

Bear with me on this... little hard to explain. So what I'm attempting to do is have a block of text remove the background of a div directly behind it. The image linked below was done is Illustrator and now I'm trying to find a solution within HTML & CSS.

Illustrator screenshot of what I'm trying to accomplish

.grid-item {
  position: relative;
  width: 300px;
  height: 200px;
  padding: 5px;
}

.grid-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #eee;
}

.grid-container img {
  position: absolute;
}

.grid-item-overlay {
  position: absolute;
  top: 5px;
  left: 5px;
  bottom: 5px;
  right: 5px;
  background-color: rgba(0,0,0,0.5);
}

span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-family: sans-serif;
  font-size: 40px;
  text-align: center;
  color: #fff;
}

<div class="grid-item">
  <div class="grid-container">
    <img src="https://unsplash.it/300/200/?random">
    <div class="grid-item-overlay">
      <span>Text Here</span>
    </div>
  </div>
</div>

The objective is to have the span text create a transparent mask of the grid-item-overlay background.

I'm open to any suggestions! :)

Answer 1

You could try working with mix-blend-mode,

mix-blend-mode : The mix-blend-mode CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background.

.grid-item {
  position: relative;
  width: 300px;
  height: 200px;
  padding: 5px;
}

.grid-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #eee;
}

.grid-container img {
  position: absolute;
}

.grid-item-overlay {
  position: absolute;
  top: 5px;
  left: 5px;
  bottom: 5px;
  right: 5px;
  background-color: rgba(0,0,0,0.5);
}

span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-family: sans-serif;
  font-size: 40px;
  text-align: center;
  color:rgba(255,255,255,1);
  mix-blend-mode: overlay;
}

<div class="grid-item">
  <div class="grid-container">
    <img src="https://unsplash.it/300/200/?random">
    <div class="grid-item-overlay">
      <span>Text Here</span>
    </div>
  </div>
</div>