Add Overlay to Image in HTML EMail Compatible With Most Desktop and Web EMail Clients

Question

Is there a way in 2017 to display either an image- or text-based overlay over the main image inside an HTML email, so that it is properly rendered by most of the current Desktop and Web email clients: Outlook 2007+, Thunderbird, Mobile Clients, GMail, Outlook.com, Yahoo Mail, etc.?

As an example, it could be a small play button rendering over the main image, that when clicked would take you to a video url.

Answer 1

Yes, although it requires a lot of code since Outlook doesn't support CSS background-image, so we have to use VML in addition to CSS to get a background image displaying everywhere. backgrounds.cm is a good starting point but hasn't been updated in some time. Something like this is a good starting point to build on:

<tr>
    <!-- Bulletproof Background Images c/o https://backgrounds.cm -->
    <td background="http://placehold.it/600x180/222222/666666" bgcolor="#222222" valign="middle" style="background-position: center center !important; background-size: cover !important;">
        <!--[if gte mso 9]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; width: 600px; height: 180px;" src="http://placehold.it/600x180/222222/666666" />
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 600px; height: 180px;">
        <v:fill opacity="0%" color="#222222" />
        <![endif]-->
        <div>
            <!--[if mso]>
            <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
            <tr>
            <td align="center" valign="top" width="600">
            <![endif]-->
            <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
                <tr>
                    <td valign="middle" style="padding: 20px; color: #ffffff;">
                        <img src="http://placehold.it/100" height="100" width="200" alt="">
                        <p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut&nbsp;erat.</p>
                    </td>
                </tr>
            </table>
            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>
        <!--[if gte mso 9]>
        </v:fill>
        </v:rect>
        </v:image>
        <![endif]-->
    </td>
</tr>