背景颜色在父div上具有不透明度但在子div上没有

Question

我有关于叠加层和不透明度以及z-index的问题。

我有一排包含背景图像和居中的h2的框。在悬停时，我希望背景图像获得较低的不透明度，比如说.6。

唯一的问题是，无论我尝试将不透明度应用于背景图像，它似乎都会影响文本，这不是我想要的。我只希望图像变浅，而不是文字。

有没有办法用CSS实现这一点，而不是用悬停时图像的较轻版本替换图像？

这是一个JS小提琴演示了我正在处理的内容： https://jsfiddle.net/syrbqsv4/

HTML：

.promo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
}

.overlay {
    height: 250px;
}

.outer-promo {
    margin-bottom: 25px;
    width: 250px;
    height: 250px;
}

.outer-promo, .description-container {
    border: 1px solid #9A8478;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.25);
}

.outer-promo {
    height: 250px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    background-image:url(https://images.pexels.com/photos/313093/pexels-photo-313093.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
    background-position:center center;
    position:relative;
}

.inner-promo {
    height: 85%;
    width: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #9A8478;
}

.overlay:hover {
  background-color:black;
  position:relative;
  cursor:pointer;
  opacity:.4;
}

<div class="promo-container">
  
  <div class="overlay">
    <div class="outer-promo events-catering-spaces">
      <div class="inner-promo">
        <h3><a href="/events-and-catering/space/">SPACES</a></h3>
      </div>
    </div>
  </div>
   
  <div class="overlay">
    <div class="outer-promo events-catering-occasions">
      <div class="inner-promo">
        <h3><a href="/events-and-catering/occasions/">OCCASIONS</a></h3>
      </div>
    </div>
  </div>

  <div class="overlay">
    <div class="outer-promo events-catering-menu">
      <div class="inner-promo">
        <h3><a href="/menu/">MENU</a></h3>
      </div>
    </div>
  </div>

  <div class="overlay">
    <div class="outer-promo events-catering-vendors">
      <div class="inner-promo">
        <h3><a href="/events-and-catering/vendors/">VENDORS</a></h3>
      </div>
    </div>
  </div>

</div>