1

2

HTML

<div id="list">
  <div class="item">
    <img src="https://habrastorage.org/webt/5a/8b/0b/5a8b0bd0b9ae6698570688.png" alt="">
    <div class="hover">
       <span id="duration">03:43</span>
    </div>
  </div>
  <div class="item">
    <img src="https://habrastorage.org/webt/5a/8b/0b/5a8b0bd0b9ae6698570688.png" alt="">
    <div class="hover">
       <span id="duration">03:43</span>
    </div>
  </div>
</div>

CSS

.list {
font-family: Arial, sans-serif
}

* {
margin: 0;
padding: 0;
}

.item {
  position: relative;
  display: inline-block;
}

.hover {
  
}

.hover #duration{
  display: none;
  color: white;
  position: absolute;
  right: 20px;
  bottom: 25px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
}

.item:hover #duration {
  display: block;
}