Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Bild mit Textblock</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>Textblock auf einem Bild</h2>
<div class="parent">
<img src="https://www.w3docs.com/uploads/media/default/0001/03/faa2b10a44e1d88ddafbf7ab6002ce24659529d4.jpeg" alt="Books" />
<div class="text-block">
<h3>Bücher</h3>
<p>Lesen Sie gerne Bücher?</p>
</div>
</div>
</body>
</html>