Overlay text on image HTML

Question

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:

Answer 1

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>