JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
	<a href="#">
		<div class="item-content">
			<h3>Item title</h3>
			<p>Item description lorem ipsum dolor sit amet contrectetur</p>
		</div>
		<img src="http://lorempixel.com/200/300" alt="img" />
	</a>
</div>

<div class="item">
	<a href="#">
		<div class="item-content">
			<h3>Item title</h3>
			<p>Item description lorem ipsum dolor sit amet contrectetur</p>
		</div>
		<img src="http://lorempixel.com/200/300" alt="img" />
	</a>
</div>

CSS

.item {
	width: 100%;
	height: auto;
}

.item-content {
	position: absolute;
	text-align: center;
	color: #fff;
	width: 80%;
	margin-top: 90%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: all .2s ease-in-out;
}

a:hover .item-content {
	opacity: 1;
	margin-top: 20%;
	background-color: rgba(24, 24, 24, .7);
}

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