Overlay on image constrained by max-width and max-height

Question

See jsFiddle example I have below. I have an image that needs to be vertically and/or horizontally aligned inside a container. That image is constrained by either max-height or max-width as well. I'd like to overlay a "duration" in the bottom right corner of the image (not the container). Can't get anything working and could use some help.

JSFiddle

HTML

<div class="thumbnail-container">
  <div class="image-container">
    <img src="http://iss.ku.edu/sites/iss.ku.edu/files/images/galleries/video.bmp"/>
    <span class="duration">00:00:30</span>
  </div>
</div>

<br/><br/>

<div class="thumbnail-container">
  <div class="image-container">
    <img src="https://image.freepik.com/free-photo/sky--horizontal_19-121673.jpg"/>
    <span class="duration">00:00:30</span>
  </div>
</div>

CSS

.thumbnail-container {
  border: 1px solid red;
  width: 300px;
  height: 150px;
  text-align: center; 
  margin: 1em 0;
  line-height: 150px;
}

.image-container {
  position: relative;
}

.image-container img {
  vertical-align: middle;
  max-width: 300px;
  max-height: 150px;
}

Answer 1

You may use flex, very helpfull here:

 .thumbnail-container { border: 1px solid red; width: 300px; height: 150px; text-align: center; margin: 1em 0; line-height: 150px; display:flex; } .image-container { position: relative; margin:auto; } .image-container img { display:block; max-width: 300px; max-height: 150px; } .duration { color: green; position: absolute; line-height:1.2em; right: 0; bottom: 0; } 

 <div class="thumbnail-container"> <div class="image-container"> <img src="http://iss.ku.edu/sites/iss.ku.edu/files/images/galleries/video.bmp"/> <span class="duration">00:00:30</span> </div> </div> <br/><br/> <div class="thumbnail-container"> <div class="image-container"> <img src="https://image.freepik.com/free-photo/sky--horizontal_19-121673.jpg"/> <span class="duration">00:00:30</span> </div> </div> 

display:inline-block too (or eventually inline-table)

 .thumbnail-container { border: 1px solid red; width: 300px; height: 150px; text-align: center; margin: 1em 0; line-height: 150px; } .image-container { position: relative; display:inline-block;/* inline-table works too if you images in cells and row to center here*/ vertical-align:middle; } .image-container img { display:block; max-width: 300px; max-height: 150px; } .duration { color: green; position: absolute; line-height:1.2em; right: 0; bottom: 0; } 

 <div class="thumbnail-container"> <div class="image-container"> <img src="http://iss.ku.edu/sites/iss.ku.edu/files/images/galleries/video.bmp"/> <span class="duration">00:00:30</span> </div> </div> <br/><br/> <div class="thumbnail-container"> <div class="image-container"> <img src="https://image.freepik.com/free-photo/sky--horizontal_19-121673.jpg"/> <span class="duration">00:00:30</span> </div> </div> 

Answer 2

Can you add code around the image and duration? If so:

 .thumbnail-container { border: 1px solid red; width: 300px; height: 150px; text-align: center; margin: 1em 0; line-height: 150px; } .image-container { position: relative; } .image-container img { vertical-align: middle; max-width: 300px; max-height: 150px; } .duration { color: green; position: absolute; right: 0; bottom: 0; } /* additional styles */ .this-is-to-get-a-positioning-context { position: relative; border: 1px solid green; display: inline-block; } .this-is-to-get-a-positioning-context { line-height: 1em; } 

 <div class="thumbnail-container"> <div class="image-container"> <span class="this-is-to-get-a-positioning-context"> <img src="http://iss.ku.edu/sites/iss.ku.edu/files/images/galleries/video.bmp"/> <span class="duration">00:00:30</span> </span> </div> </div> <br/><br/> <div class="thumbnail-container"> <div class="image-container"> <span class="this-is-to-get-a-positioning-context"> <img src="https://image.freepik.com/free-photo/sky--horizontal_19-121673.jpg"/> <span class="duration">00:00:30</span> </span> </div> </div>