JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
  <a href="#1" class="img-link">
    <img src="#img1" alt="Картинка 1" class="img" width="300" height="130" />
    <div class="cover-bg"></div>
    <p class="cover-title">Some cover text 1</p>
  </a>
  <a href="#2" class="img-link">
    <img src="#img2" alt="Картинка 2" class="img" width="300" height="130" />
    <div class="cover-bg"></div>
    <p class="cover-title">Some cover text 2</p>
  </a>
  <a href="#3" class="img-link">
    <img src="#img3" alt="Картинка 3" class="img" width="300" height="130" />
    <div class="cover-bg"></div>
    <p class="cover-title">Some cover text 3</p>
  </a>
  <a href="#4" class="img-link">
    <img src="#img4" alt="Картинка 4" class="img" width="300" height="130" />
    <div class="cover-bg"></div>
    <p class="cover-title">Some cover text 4</p>
  </a>
  <a href="#5" class="img-link">
    <img src="#img5" alt="Картинка 5" class="img" width="300" height="130" />
    <div class="cover-bg"></div>
    <p class="cover-title">Some cover text 5</p>
  </a>
  <a href="#6" class="img-link">
    <img src="#img6" alt="Картинка 6" class="img" width="300" height="130" />
    <div class="cover-bg"></div>
    <p class="cover-title">Some cover text 6</p>
  </a>
</div>

CSS

.gallery {
    width: 980px;
    text-align: center;
}

/* Ссылки и обёртка для картинок */
.img-link {
  display: inline-block;
  position: relative;
  width: 300px;
  height: 130px;
}

.img {
  width: 100%;
  height: 100%;
}

/* Общие стили для перекрывающих элементов */
.cover-bg,
.cover-title {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.cover-title {
  top: 40%;
}

/* Отображаем перекрывающие элементы при наведении на блок с картинкой */
.img-link:hover .cover-bg,
.img-link:hover .cover-title{
  display: block;
}

/* Полупрозрачный перекрывающий голубой фон */
.cover-bg {
  background: #77c4f0;
  -khtml-opacity: .6;
	-moz-opacity: .6;
		 opacity: .6;
}

/* Перекрывающий текст */
.cover-title {
  color: #000;
  font-size: 120%;
  text-align: center;
  text-transform: uppercase;
}