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.
Table of contents
- 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.
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.
