I have an image on which I want to overlay some white text. I'm trying to achieve the same thing video-sharing sites such as YouTube do with the video duration in the corner of the thumbnail. How can I do this with CSS/HTML?
Like This:

Try This :
.container {
width: 300px;
position: relative;
}
.container img {
width: 100%;
}
.container h3 {
background-color: rgba(0,0,0,0.3);
color: #fff;
position: absolute;
bottom: 0;
right: 2px;
}
<div class="container">
<img src="https://i.imgur.com/0s8kLb7.png">
<h3>Cute Animal</h3>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With