hover with mix-blend-multipy

#accordion {
  padding: 80px 0;
}

#accordion .categoria {
  position: relative;
  cursor: pointer;
}

#accordion .categoria h2 {
  color: #fff;
  position: absolute;
  top: calc(50% - 2rem);
  width: 100%;
  text-align: center;
  z-index: 200;
}

#accordion .categoria img {
  filter: brightness(0.5);
  transition: all 500ms;
}

#accordion .categoria:hover img {
  filter: brightness(1);
}

#accordion .categoria .overlay {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 500ms;
  z-index: 100;
}

#accordion .categoria:hover .overlay,
#accordion .active {
  background-color: #970202;
  mix-blend-mode: multiply;
}

#accordion .categoria .divider {
  width: 70%;
  height: 0;
  display: block;
  position: absolute;
  bottom: 0;
  text-align: center;
  transition: all 500ms;
  z-index: 200;
  margin: 0 17%;
  background: #fff;
}

#accordion .categoria:hover .divider {
  height: 17px;
}

#accordion ul {
  padding: 0;
  margin: 0;
}

#accordion ul li {
  list-style: none;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
    
<div class="container"> 
  <div id="accordion" class="row">

    <!-- box com link para descrição -->
    <div class=" col-3">
      <div class="">
        <div class="categoria" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <img src="https://i.imgur.com/pQcVh9h.png"class="img-fluid">
          <h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseExample2">grelhas argentinas</h2>
          <span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseExample2"></span>
          <span class="divider"></span>
        </div>
      </div>
    </div>
    <div class=" col-3">
      <div class="">
        <div class="categoria" data-toggle="collapse" data-target="#collapse4" aria-expanded="true" aria-controls="collap">
          <img src="https://i.imgur.com/pQcVh9h.png"class="img-fluid">
          <h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseEx">grelhas argentinas 2</h2>
          <span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
            aria-controls="multiCollapseExampl"></span>
          <span class="divider"></span>
        </div>
      </div>
    </div>

    <!-- conteúdo de cada imagem -->
    <div class="col-12">
      <div id="collapseOne" class="collapse border " aria-labelledby="headingOne" data-parent="#accordion">
        <div class="">
          1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
          officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt vice lomo. Leggings occaecat
          craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
          labore sustainable VHS.
        </div>
      </div>
      <div id="collapse4" class="collapse border " aria-labelledby="" data-parent="#accordion">
        <div class="">
          2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
          officia aute, non cupi
        </div>
      </div>
    </div>

  </div>
</div>