<!DOCTYPE html>
<html>
<head>
<title>Image with text block</title>
<style>
.parent {
position: relative;
}
.text-block {
position: absolute;
bottom: 50px;
left: 20px;
background-color: #000;
opacity: .6;
color: white;
padding-left: 20px;
padding-right: 20px;
}
.parent img {
width: 100%;
}
</style>
</head>
<body>
<h2>Text Block on an Image</h2>
<div class="parent">
<img src="https://www.w3docs.com/uploads/media/default/0001/03/faa2b10a44e1d88ddafbf7ab6002ce24659529d4.jpeg" alt="Books" />
<div class="text-block">
<h3>Books</h3>
<p>Do you like reading books?</p>
</div>
</div>
</body>
</html>