JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery-image">
  <a href="#">
      <img src="http://www.placecage.com/280/280" width="280">
  </a>
  <h2><span>Text</span></h2>
</div>

CSS

.gallery-image {
  position: relative;
}

h2 {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
  z-index: 3;
}
h2 span {
  color: white;
  font: bold 24px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
}

a{
    position: inherit;
    z-index: 2;
}