JSFiddle - React, Tailwind, and code Playground

by Axiniya

HTML

<div class="image-sports-container">
<a href=""><img src="http://localhost/wp-content/uploads/2022/02/sport-category-1.png" alt=""><span>Бег</span></a>
<a href=""><img src="http://localhost/wp-content/uploads/2022/02/sport-category-3.png" alt=""><span>Тренинг</span></a>
<a href=""><img src="http://localhost/wp-content/uploads/2022/02/sport-category-4.png" alt=""><span>Футбол</span></a>
<a href=""><img src="http://localhost/wp-content/uploads/2022/02/sport-category-5.png" alt=""><span>Спортивный стиль</span></a>
</div>

CSS

.image-sports-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.image-sports-container a {
 margin: 5px;
 margin-top: 0px;
 position: relative;
 transition: opacity 0.5s;
}

.image-sports-container a::after {
	content: "";
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.image-sports-container a:hover::after {
  content: "";
  background-image: linear-gradient(to left, #4d90fe, #0B2E67);
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  opacity: 0.6;
  transition: opacity 0.5s;
}

.image-sports-container span {
  position: absolute;
  top: 45%;
  left: 46%;
  z-index: 100;
  color: white;
  font-size: 25px;
  font-weight: 800;
}