Input
Output
<!DOCTYPE html> <html> <head> <style> .card { position: relative; width: 300px; color: white; font-family: sans-serif; } .card img { width: 100%; display: block; } .card .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; font-size: 20px; } </style> </head> <body> <div class="card"> <img src="https://via.placeholder.com/300x200" alt="Image"> <div class="overlay">Hello World</div> </div> </body> </html>