I am writing an email template where I need to show few information at the top of the image. I did use position:absolute but email clients such as gmail and many more do not render it. So after research on internet I came across the concept of faux-absolute and it is working wonder. But it is for bottom overlay on the image. I need one overlay at the top right corner as well such as below picture. please help me achieve this.
My code for adding it at the bottom is as follows.
<td width="50%;">
<div class="over-mob" style="max-height:250px; margin: 0 auto; text-align: left;">
<img src="myimage.jpg" alt="Image 1" width="100%" style="display: block;" width="400" height="300">
</div>
<!-- TEXT BLOCK START -->
<table role="presentation" class="faux-absolute reset" border="0" cellpadding="0" cellspacing="0" style="position:relative; opacity:0.999;width:100%;">
<tr>
<td valign="top">
<table role="presentation" class="hero-textbox" border="0" cellpadding="0" cellspacing="0" width="100%" style="background:url('blue_overlay.png'); background-size:100% 50px;" height="50" align="center">
<tr>
<td valign="middle" style="padding: 0 20px;" width="100%">
<div class="star"></div>
<div class="star"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
