How to Use amp-image-lightbox in Your AMP Emails

Suryanarayan Pal
BySuryanarayan Pal

3 mins read

You may have noticed an effect where images expand and move to the page center when you click on them while putting a dark shade on the rest of the page.

This effect is known as the lightbox effect, and it makes it easier for your users to focus on the image to analyze it more carefully.

You may be surprised to know that, with the help of amp-image-lightbox, you can create an image lightbox effect right inside your AMP emails.

This guide will discuss amp-image-lightbox, its applications, and the interesting features you can use.

  • What is amp-image-lightbox?

  • Applications of amp-image-lightbox

  • Features of amp-image-lightbox

  • Wrapping up

What is amp-image-lightbox?

The amp-image-lightbox is an AMP email component you can use to show AMP images in a lightbox effect. This effect will make an image come at the screen center when users click on it and puts a transparent dark shade on the background elements.

amp image lightbox in action

Applications of amp-image-lightbox

The amp-image-lightbox has many applications, and some of them are listed below:

1. Create tutorial images

Providing a great user experience is essential to building a strong customer relationship. One way to do this is by adding a lightbox effect to images on tutorial emails. Since you may have screenshots of different apps, your users can click them to zoom and get a better look if you add the lightbox effect. This effect provides a positive user experience and excites them to receive further emails from you.

Related guide: How to Create Responsive Email Design For Better User Experience

2. Make detailed images visible

Does your image have many subtle details that can only be seen when it's zoomed in? If so, consider adding the lightbox effect so when your users click on the image, it will zoom in, making it more visible.

3. Make your images appealing

The lightbox effect makes your images more appealing because when images transition to the screen center, it is eye-pleasing to see. So, even if you don't need to add this effect, you can still add it to make your images more appealing.

Features of amp-image-lightbox

The amp-image-lightbox has many useful features that'll help you create great lightbox effects. Here's a list of those features:

✅ Style your lightbox with standard CSS

You can change the look and feel of your lightbox with standard CSS properties. For example, you can change the background color using the background property and define the color. You can also use other CSS properties, such as color, to customize it the way you want.

Related guide: A Complete Guide to Dark Mode Email Design and Campaigns

✅ Add captions to the viewport

Do you want to add captions even when your lightbox effect is active? If so, you can use the <figcaption> to set captions if you've used the <figure> tag. However, if you've used the aria-describedby in your amp-img tag, then you've to set up a different element and give it an id that you set as the value of aria-describedby. Now, the content of this element will be shown as the caption text.

✅ Close the effect with a button

You can use the data-close-button-aria-label attribute to configure a close button which, if the user press, the lightbox effect will disappear.

Wrapping up

The lightbox effect allows you to make your content appealing and more accessible. Now with the help of amp-image-lightbox, you can create that effect even inside your emails.

We have also covered other AMP email components such as amp-img, amp-accordion, amp-anim, which also open up an array of different features. So do check those out to learn about them and create interesting emails for your audience.

Hack growth with weekly round up of guides

100k+ marketers like you read these guides every month

What should you do next?

You made it till the end! Here's what you can do next to grow your business:

Get smarter with email resources

Free guides, ebooks, and other resources to master email marketing.

Do interactive email marketing with Mailmodo

Send forms, carts, calendars, games and more within your emails to boost ROI.

Consult an email expert

30-min free email consultation with an expert to fix your email marketing.

Get 3X conversions with interactive emails


Get 3X conversions
with interactive emails


Create & send interactive emails without coding


Put revenue on auto-pilot with pre-built journeys


Save time with AI-powered email content creation

1000+ businesses grew with Mailmodo, including