Bring text in div with overlay to front so opacity doesn't affect text color?

Question

I apologize for poor wording, so I've included the timer I'm working on. Is it possible to hack this so the text is still on top of the overlay and not darkened by it? Be sure to open in full screen or the white will blend.

If it is not I can consider re-nesting, but not sure how I could achieve the same results without the overlay covering the text. I've looked at a few similar examples, but can't isolate precisely how they were able to keep the white text unaffected by the opacity while allowing the elements to remain inside the Div.

#countdown-overlay {
  background: url('https://www.toptal.com/designers/subtlepatterns/patterns/spiration-dark.png');
  opacity: .8;
  height: 100%;
  width: 100%;
}

#countdown {
  position: absolute;
  color: #fff;
  height: 50vh;
  width: 100%;
  background: #673AB7;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #512DA8, #673AB7);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #512DA8, #673AB7);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.counter-title {
  margin: 0;
  padding: 2em;
  font-size: 200%;
  font-weight: 250;
  text-align: center;
}

#timer {
  text-align: center;
  display: flex;
  justify-content: center;
}

.clock-border {
  display: table;
  border: 2.5px solid;
  border-radius: 100px;
  border-color: #fff;
  padding: 0px;
  width: 150px;
  height: 150px;
  line-height: 0px;
  margin-left: 3em;
}

.value {
  font-size: 200%;
  display: table-cell;
  vertical-align: middle;
}

<section id="countdown">
  <div id="countdown-overlay">
    <h1 class="counter-title"> Next stream in</h1>

    <div id="timer">
      <div class="clock-border">
        <p class="value">4 Days</p>
      </div>
      <div class="clock-border">
        <p class="value">7 Hours</p>
      </div>
      <div class="clock-border">
        <p class="value">3 Min</p>
      </div>
      <div class="clock-border">
        <p class="value">24 Sec</p>
      </div>
    </div>


  </div>



</section>

Answer 1

Remove the opacity from div and add before. Give background: rgba(0, 0, 0, 0.71); to the pseudo-element and a z-index

#countdown-overlay {
  background: url('https://www.toptal.com/designers/subtlepatterns/patterns/spiration-dark.png');
 /* opacity: .8;*/
  height: 100%;
  width: 100%;
  position:relative;
}
/**Add before */
#countdown-overlay:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(169, 161, 186, 0.38);
    width: 100%;
    height: 100%;
}

#countdown {
  position: absolute;
  color: #fff;
  height: 50vh;
  width: 100%;
  background: #673AB7;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #512DA8, #673AB7);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #512DA8, #673AB7);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.counter-title {
  margin: 0;
  padding: 2em;
  font-size: 200%;
  font-weight: 250;
  text-align: center;
  position:relative;
}

#timer {
  text-align: center;
  display: flex;
  justify-content: center;
  position:relative;
}

.clock-border {
  display: table;
  border: 2.5px solid;
  border-radius: 100px;
  border-color: #fff;
  padding: 0px;
  width: 150px;
  height: 150px;
  line-height: 0px;
  margin-left: 3em;
}

.value {
  font-size: 200%;
  display: table-cell;
  vertical-align: middle;
}

<section id="countdown">
  <div id="countdown-overlay">
    <h1 class="counter-title"> Next stream in</h1>

    <div id="timer">
      <div class="clock-border">
        <p class="value">4 Days</p>
      </div>
      <div class="clock-border">
        <p class="value">7 Hours</p>
      </div>
      <div class="clock-border">
        <p class="value">3 Min</p>
      </div>
      <div class="clock-border">
        <p class="value">24 Sec</p>
      </div>
    </div>


  </div>



</section>