<div class="item-wrapper">
	<figure>
		<a href="https://www.blindeman.com/wp-content/uploads/2020/04/sleeping-kitty-1.png" target="_blank"><img src="https://www.blindeman.com/wp-content/uploads/2020/04/sleeping-kitty-1-300x225.png" /></a>
	</figure>
	<div class="item-info">
		<h1>Sleeping kitty</h1>
		<p class="img-credit">by <a href="https://blindeman.com/a/voor-2-geliefde-ooms/" target="_blank">Naomi Blindeman</a></p>
	</div>
</div>

.item-wrapper {
	box-sizing: border-box;
	height: 225px;
	position: relative;
	width: 300px;
}
figure,
h1 {
	margin: 0;
}
.item-info {
	bottom: 0;
	box-sizing: border-box;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	left: 0;
	padding: 1rem;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
}
.img-credit {
	margin-bottom: 0;
	pointer-events: auto;
}
.item-info a {
	color: white;
}

.item-info {
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 1s ease;
}
.item-wrapper:hover .item-info {
	opacity: 1;
}