JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">

  <a class="upper-section" href="">
    <div class="parent">
      <img class="child" width="275px" height="275px" src="https://i.ibb.co/vjsFfPq/Screenshot-2020-10-03-at-17-30-33.png"/>
      <span class="overlay"></span>
    </div>
  </a>

  <div class="lower-section">
    <div class="lower-section-inner">
      <div class="title">Autumn Trees</div>
      <div class="description">Mist rolling in over the horizion.</div>
      <span class="button">Button</span>
    </div>
  </div>
  
</div>

<div class="wrapper">

  <a class="upper-section" href="">
    <div class="parent">
      <img class="child" width="275px" height="275px" src="https://i.ibb.co/020Lc1f/Screenshot-2020-10-03-at-17-31-09.png"/>
      <span class="overlay"></span>
    </div>
  </a>

  <div class="lower-section">
    <div class="lower-section-inner">
      <div class="title">Ice patterns</div>
      <div class="description">Detail of a frozen landscape.</div>
      <span class="button">Button</span>
    </div>
  </div>
  
</div>

CSS

.wrapper {
  position:relative;
  top:0;
  float:left;
  display:inline-block;
  width:275px;
  background:pink;
  margin-right:24px;
}

.overlay {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  background-color: rgba(0,0,0,0.5) !important;
  opacity: 0 ;
}

.overlay.open {
  opacity:1 ;
}

.lower-section {
  position:relative;
}

.button {
  position:absolute;
  display:block;
  top:0;
  right:0;
  background:orange;
}

JavaScript

jQuery(document).ready(function($) {	
  
  $(".button").click(function() {
    $(this).closest(".wrapper").find(".overlay").toggleClass("open");
	});
  
});