JSFiddle - React, Tailwind, and code Playground

by rootd

HTML

<figure class="parent">
  <a 
    data-fancybox="gallery" 
    href="https://medialeaks.ru/wp-content/uploads/2017/10/catbread-03-600x400.jpg" 
    class="img"
  >
    <img src="https://medialeaks.ru/wp-content/uploads/2017/10/catbread-03-600x400.jpg">
  </a>
  
  <figcaption>
    Какой миленький
  </figcaption>
</figure>

CSS

.parent {
  position: relative;
  z-index: 2;
  width: 200px;
  height: 200px;
}

.img {
  display: block;
}

.img img {
  display: block;
  width: 100%;
}

.parent figcaption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  background: rgba(0,0,0,.5);
}