The secret is to leave the parent with position: relative and the child with absolute position, so the child element will be positioned relative to the parent (if it has the positioning set).

There are several ways to do it, one of which is the one you mentioned about creating an element to enter and position the duration. In my opinion, a better alternative is to use data attributes , so you take advantage of the very element in which the video (or thumbnail) is, without having to fill the html of% unnecessary.

You can retrieve the value of a <span> attribute by means of the data-alguma-coisa function of the CSS:

.video { position: relative }

.video > img { width: 100% }

.video::after {
  background: rgba(0, 0, 0, .8);
  color: #fff;
  content: attr(data-duration);
  padding: 4px 10px;
  pointer-events: none;
  position: absolute;
  bottom: 4%;
  right: 2%;
}

<div class='video' data-duration='5:00'>
  <img src='http://i.stack.imgur.com/OEbRf.jpg' alt=''>
<div>

For a few more minutes in front of my PC, after the Renan answer that brought me clear , how to obtain the desired effect. I bring another solution just by positioning the HTML element span within div Pai, giving the tag position where you can insert the time of a video.

Code

#pai p{
position:relative;
float:left;
font-size: 12pt;
font-weight: bold;
}

.filho p span{
position:absolute;
background-color: black;
color: #fff;
padding: 4px 10px;
position: absolute;
bottom: 4%;
right: 2%;
}

<div id="pai" class="filho">
<p>
<span>00:00</span>
<img src="https://img.youtube.com/vi/YQHsXMglC9A/hqdefault.jpg"/>
</p>
</div>

   

This information (time of the video) in my case, I am looking for a Javascript with a database (Array). So I just needed to stylize a rule for div container block level and insert / position the inline element span .