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

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "headline": "Amp-image-lightbox: Features, Application, and Examples",
  "description": "Features and applications of amp-image-lightbox, one of the AMP email components. Use amp-image-lightbox to add lightbox effects to images in the AMP emails.",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1652870720/strapi/Featured_image_Amp_image_lightbox_b3474df7bd.png",
  "datePublished": "2022-02-17T19:26:22.951Z",
  "dateModified": "2025-01-08T06:28:10.723Z",
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "url": "https://www.mailmodo.com/",
    "sameAs": [
      "https://www.linkedin.com/company/mailmodo/",
      "https://www.facebook.com/mailmodo/",
      "https://www.instagram.com/mailmodohq/",
      "https://www.youtube.com/@mailmodo"
    ],
    "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
    "description": "Mailmodo is a complete email marketing platform that helps email marketers to create and send interactive emails to drive growth and engagement.",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Lewes",
      "addressRegion": "DE",
      "postalCode": "19958",
      "streetAddress": "Mailmodo Technologies Inc. 16192, Coastal Highway",
      "addressCountry": {
        "@type": "Country",
        "name": "US"
      }
    },
    "contactPoint": {
      "@type": "ContactPoint",
      "email": "enquiries@mailmodo.com",
      "contactType": "customer service"
    }
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Amp-image-lightbox: Features, Application, and Examples",
  "description": "Features and applications of amp-image-lightbox, one of the AMP email components. Use amp-image-lightbox to add lightbox effects to images in the AMP emails.",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1652870720/strapi/Featured_image_Amp_image_lightbox_b3474df7bd.png",
  "datePublished": "2022-02-17T19:26:22.951Z",
  "dateModified": "2025-01-08T06:28:10.723Z",
  "author": {
    "@type": "Person",
    "name": "Suryanarayan Pal",
    "url": "https://www.mailmodo.com/guides/author/suryanarayan-pal/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.mailmodo.com/static/images/logo/logo-full.svg"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.mailmodo.com/guides/amp-image-lightbox/"
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "#creator",
  "description": "Email marketing software to create and send interactive emails to maximize conversions and reinvent your user journey",
  "email": "support@mailmodo.com",
  "image": "https://www.mailmodo.com/static/images/og-image.png",
  "knowsAbout": "Email marketing",
  "legalName": "Mailmodo Technologies Inc.",
  "location": "United States",
  "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
  "name": "Mailmodo",
  "sameAs": [
    "https://twitter.com/mailmodo",
    "https://www.facebook.com/company/mailmodo/",
    "https://www.linkedin.com/company/mailmodo/"
  ],
  "url": "https://www.mailmodo.com/"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.mailmodo.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Guides",
      "item": "https://www.mailmodo.com/guides/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "amp image lightbox",
      "item": "https://www.mailmodo.com/guides/amp-image-lightbox/"
    }
  ]
}
</script>

## Table of contents

- What is amp-image-lightbox?
- Applications of amp-image-lightbox
- Features of amp-image-lightbox
- Wrapping up

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](https://www.mailmodo.com/guides/amp-for-email/).

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](https://www.mailmodo.com/guides/amp-email-component/) you can use to show [AMP images](https://www.mailmodo.com/guides/amp-img/) 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](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1651817360/strapi/amp_image_lightbox_in_action_0d7f8a88f7.gif)

## 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](https://www.mailmodo.com/guides/responsive-email-design/)

### 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](https://www.mailmodo.com/guides/dark-mode-email/)

### ✅ 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](https://www.mailmodo.com/guides/email-accessibility/). 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](https://www.mailmodo.com/guides/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](https://www.mailmodo.com/guides/funny-emails/) for your audience.

---

**Author: Suryanarayan Pal**

Suryanarayan has 7 years of experience in email marketing for B2B, SaaS, and e-commerce, specializing in email deliverability and project management.

