It’s just done with HTML and CSS:
The HTML:
<div class="deal_image">
<div class="loop_thumbnail" style="background-color:Green;color:white"> New Deal</div>
<img class=" " width="145" height="120" alt="deal" src="https://netcdn.indiafreestuff.in/wp-content/uploads/2013/09/trad-150x150.jpg">
</div>
The CSS:
.loop_thumbnail {
background-color: #FFFFFF;
color: #000000;
font-size: 14px;
font-weight: bold;
height: 24px;
line-height: 24px;
margin-left: -3px;
margin-top: 45px;
opacity: 0.9;
position: absolute;
text-align: center;
width: 149px;
}
A browser tool like Firebug can show you this kind of thing.
Helpful resources re: CSS:
https://getfirebug.com
https://www.w3schools.com/css/
https://developer.mozilla.org/en-US/learn/css