CODEWITHSUNDEEP
htmlemailhtml-tablehtml-emailemail-templates
YaSh Chaudhary
YaSh Chaudhary

Reputation: 2725

How to show multiple images overlapping in an email template?

I am trying to display multiple profile pictures in a row with text.

Here is what I am getting :

enter image description here

what I am trying to get:

enter image description here

Upvotes: 1

Views: 2261

Answers (2)

HTeuMeuLeu
HTeuMeuLeu

Reputation: 2751

You can achieve something like this by using the Faux Absolute Position technique. Here’s an example based on your screenshot:

<div style="font-size:0;">
    <span style="display:inline-block; max-width:96px; font-size:16px;">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />
    </span>
    <span style="display:inline-block; max-width:96px; font-size:16px;">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />
    </span>
    <span style="display:inline-block; max-width:96px; font-size:16px;">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />
    </span>
</div>

Here are screenshots on Email on Acid. This will work in most email clients (from Apple Mail, Gmail, Yahoo, Outlook.com), with a few quirks happening on less popular clients (like GMX, Comcast). In the Outlooks (2007-2019) on Windows, the images will appear as square next to each others. If we want to improve this, we can use VML to the rescue. Here's what it looks like:

<!--[if mso]>
<v:group style="width:320px; height:128px;" coordorigin="0 0" coordsize="320 128">
    <v:oval style="position:absolute; left:0; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">
        <v:fill src="https://randomuser.me/api/portraits/men/1.jpg" type="frame" size="96pt,96pt" />
    </v:oval>
    <v:oval style="position:absolute; left:72pt; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">
        <v:fill src="https://randomuser.me/api/portraits/men/2.jpg" type="frame" size="96pt,96pt" />
    </v:oval>
    <v:oval style="position:absolute; left:144pt; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">
        <v:fill src="https://randomuser.me/api/portraits/men/3.jpg" type="frame" size="96pt,96pt" />
    </v:oval>
</v:group>
<![endif]-->

Here's the overall code mixing the two solutions:

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to show multiple images overlapping in an email template?</title>
    <!-- https://stackoverflow.com/questions/62562869/how-to-show-multiple-images-overlapping-in-an-email-template -->
    <!--[if mso]>
    <xml>
    <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
</head>
<body>
    <!--[if mso]>
    <v:group style="width:320px; height:128px;" coordorigin="0 0" coordsize="320 128">
        <v:oval style="position:absolute; left:0; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">
            <v:fill src="https://randomuser.me/api/portraits/men/1.jpg" type="frame" size="96pt,96pt" />
        </v:oval>
        <v:oval style="position:absolute; left:72pt; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">
            <v:fill src="https://randomuser.me/api/portraits/men/2.jpg" type="frame" size="96pt,96pt" />
        </v:oval>
        <v:oval style="position:absolute; left:144pt; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">
            <v:fill src="https://randomuser.me/api/portraits/men/3.jpg" type="frame" size="96pt,96pt" />
        </v:oval>
    </v:group>
    <![endif]-->
    <!--[if !mso]><!-->
    <div style="font-size:0;">
        <span style="display:inline-block; max-width:96px; font-size:16px;">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />
        </span>
        <span style="display:inline-block; max-width:96px; font-size:16px;">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />
        </span>
        <span style="display:inline-block; max-width:96px; font-size:16px;">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />
        </span>
    </div>
    <!--<![endif]-->
</body>
</html>

Upvotes: 7

Ghost
Ghost

Reputation: 735

You can use margins for this.

img {
  width: 64px;
  height: 64px;
  border: 4px solid white;
  border-radius: 64px;
  margin-left: -32px;
  background: transparent;
}

.imgStack {
  padding-left: 32px;
}

.imgStackText {
  font-family: Helvetica;
  position: relative;
  bottom: 28px;
}
<div class="imgStack">
<img src="https://i.ya-webdesign.com/images/avatar-png-1.png"/>
<img src="https://i.ya-webdesign.com/images/avatar-icon-png-1.png"/>
<span class="imgStackText"><strong>Male</strong> and <strong>Female</strong> are in the copy of this Email.</span>
</div>

Edit: Try max-width on td

img {
  width: 64px;
  height: 64px;
  border: 4px solid white;
  border-radius: 64px;
  background: transparent;
}

.smallerCell {
  max-width: 32px;
}

.imgStackText {
  font-family: Helvetica;
  color: #035;
}
<table>
  <tr>
    <td class="smallerCell"><img src="https://i.ya-webdesign.com/images/avatar-png-1.png"/></td>
    <td class="smallerCell"><img src="https://i.ya-webdesign.com/images/avatar-icon-png-1.png"/></td>
    <td><img src="https://i.ya-webdesign.com/images/avatar-icon-png-1.png"/></td>
    <td class="imgStackText"><strong>Male</strong> and <strong>Female</strong> are in the copy of this Email.</td>
  </tr>
</table>

Inline CSS, as suggested by Nathan

<div style="padding-left:32px;" >
  <img src="https://i.ya-webdesign.com/images/avatar-png-1.png" style="width:64px;height:64px;border-width:4px;border-style:solid;border-color:white;border-radius:64px;margin-left:-32px;background-color:transparent;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;" />
  <img src="https://i.ya-webdesign.com/images/avatar-icon-png-1.png" style="width:64px;height:64px;border-width:4px;border-style:solid;border-color:white;border-radius:64px;margin-left:-32px;background-color:transparent;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;" />
  <span style="font-family:Helvetica;position:relative;bottom:28px;" ><strong>Male</strong> and <strong>Female</strong> are in the copy of this Email.</span>
</div>

Upvotes: -2

Related Questions