<style>
.overlay-container {
	position: relative;
	width: 100%;
}

.overlay-image {
	display: block;
	width: 100%;
	height: auto;
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: #000000;
}

.overlay-container:hover .overlay {
	opacity: 1;
}

.overlay-text {
	color:#ffffff;
	position: absolute;
	padding:5%;
}
</style>

<div class="overlay-container">
	<img src="image.png" alt="" class="overlay-image">
	<div class="overlay">
		<div class="overlay-text">
			<p>Lorem Ipsum</p>
		</div>
	</div>
</div>

Lorem Ipsum