How to use the spotlight effect for images

Table of contents

• Overview

• How the spotlight effect works

• How to add a spotlight to an image

• Spotlight settings

• Additional interactivity options

• Next steps

Overview

The Spotlight effect allows you to enlarge an image inside a popup when readers click on a selected area. It helps you highlight important visuals without changing your layout.

This feature is useful for catalogs, brochures, real estate listings, menus, and other visual publications where image details matter.

Key benefits of spotlight images

• Draw focus to important visuals

• Open images in a larger format for better visibility

• Keep your layout clean while still showcasing image details

• Increase reader engagement with interactive design

How the Spotlight effect works

When you apply the Spotlight effect, a clickable area is placed over an image. When readers click that area, the image opens in a popup at a larger size.

After adding the Spotlight, the selected area appears with a blue transparent overlay in Design Studio, making it easy to identify.

How to add a Spotlight to an image

• Open your flipbook in Design Studio.

• Go to the Interactions tab in the left-side panel.

• Select the Spotlight element.

• Drag and drop it over the image you want to enhance.

• Resize the area to cover the full image or just a specific section.

• Click Upload image to open the Media Library and select or upload the image that will appear in the popup.

Spotlight settings

After placing the Spotlight, you can customize it from the left settings panel.

Tooltip
Edit the hover text (for example: "Click to view image").

Show background
Enable or disable the popup background overlay.

Image size
Choose between Small, Medium, or Large display size.

Image properties

• Fit to frame: Keeps the entire image visible inside the popup.

• Scale to fill: Fills the popup area and may crop edges.

Image preview
Replace the selected image or remove it.

Additional interactivity options

In addition to the spotlight effect, you can:

Add a hyperlink to the image (e.g., link to a product page)

Add a link area to navigate to:

• Next page

• Previous page

• First or last page

• A specific custom page

Common use-cases

Marketing catalogs: Let readers zoom in on product details.

Real estate brochures: Enlarge property images for better visibility.

Restaurant menus: Highlight signature dishes.

Educational materials: Focus attention on diagrams or illustrations.

Troubleshooting

The popup does not open
Make sure the Spotlight area is correctly placed over the image and not outside the page boundaries.

The wrong image appears in the popup
Edit the Spotlight element and reselect the correct image.

The clickable area is too small
Resize the Spotlight overlay to better match the image area.

Next steps

Useful resources

Explore more ways to add interactivity:

• How to add interactions and elements to your flipbooks
•  How to add a product tag
• How to add music and videos to flipbooks
• How to create shoppable catalogs
• How to publish your flipbook
• Adding photo slideshows in your publications
• How to automate multimedia elements in your digital flipbooks

Need expert support?