how to add time duration in right bottom corner of video thumbnail in html css

[alex2024]

i am looking to develop my own site but i need to know how to add time duration in right bottom corner of video thumbnail so ...how to turn this

to this

my html
<article>
<div>
<figure><a href="https://mysite.html" title="funny dog"><img src="data:image/gif;base64,R0lGODlhIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-i="https://mysite.org/wp-content/uploads/2024/10/d0f834bb35810ab121aa4f40024.jpg" alt="funny dog" width="352" height="198"></a></figure>
<div class="length">03:16</div>
</div>
<header>
<h2 class="h2"><a href="https://mysite.html" title="funny dog">funny dog</a></h2>
<p><a rel="tag" href="https://mysitel.org"></a></p>
</header>
</article>
and css https://filebin.net/archive/9jlii52f402jtmqx/zip