JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div class='wrapper'>
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Faust_bei_der_Arbeit.JPG/1920px-Faust_bei_der_Arbeit.JPG' class='image' width='400px'>
    <div class='description'>
      <p class='text'>
        Test
      </p>
    </div>
  </div>

CSS

section {
  width: 400px;
  height: 267px;
}

.wrapper {
  height: 100%;
  position: relative;
}

.description {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  background-color: rgba(11, 60, 93, 0.6);
  color: #fff;
  width: 100%;
  height: 100%;
  pointer-events: none;
  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.2em;
}

.text {
  padding: 20px 32px;
}