Opacity background on hover

Hello! i'd like to have same opacity filter like you have in your demo. This is my piece of code that render slider

<!-- [LOOP INIZIO] -->
<div class='oc-item'> 
  <div class="product">
    <div class="product-image">
      <a href="|controllo;urlDettaglioProdotto;|">
        <img src='|controllo;urlImmagineProdotto;|' alt='|controllo;NomeProdotto;|'></a>

      <div class="bg-overlay">
        <div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400">
          <div class="product-desc">
            <div class="product-title"><span class="subtitle">|controllo;spc:Marca;|</span><h3><a href="|controllo;urlDettaglioProdotto;|">|controllo;NomeProdotto;|</a></h3></div>
            <div class="product-price"><del>|controllo;DescrizionePrezzoListino;|</del> <ins>|controllo;DescrizionePrezzo;|</ins></div>
          </div>
        </div>
        <div class="bg-overlay-bg bg-transparent dark"></div>
      </div>

    </div><!--product-image-->

  </div><!--product-->
</div><!--oc-item-->
<!-- [LOOP FINE] -->

How can i have same opacity black result on hover product like in your demo attached? https://ibb.co/DKYPDvC
Thanks

great thanks! will be possible change also color background and opacity level (0.8 or 0.7 etc..?)