JSFiddle - React, Tailwind, and code Playground

HTML

<a href="" class="item">
	<span class="overlay">Текст описания фото</span>
	<span class="img">Фото Корзинкина</span>
</a>

CSS

.item {
    display: inline-block;
	position: relative;
	color: #fff;
    text-align: center;
    text-decoration: none;
}
.item > * {
	display: block;
}
.item .overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	background-color: rgba(0,0,0,0.5);
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	transition: opacity 0.5s;
}
.item:hover .overlay {
	opacity: 1;
}
.img {
	height: 140px;
	width: 140px;
	background-color: pink;
}