<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
box-sizing: border-box;
}
.parent {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.parent img {
vertical-align: middle;
}
.parent .text {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);/* Fallback color */
background: rgba(0, 0, 0, 0.5);/* Black background with opacity */
color: #ffffff;
width: 100%;
padding: 20px;
}
</style>
</head>
<body>
<h2>Transparent Text on an Image</h2>
<div class="parent">
<img src="https://www.w3docs.com/uploads/media/default/0001/03/faa2b10a44e1d88ddafbf7ab6002ce24659529d4.jpeg" alt="Notebook" style="width:100%;">
<div class="text">
<h2>Title</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
</body>
</html>