Source Code:
(back to article)
Submit
Result:
Report an issue
<!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>