An overlay displays an asset on top of the existing site content while dimming or obscuring the surrounding area. This helps focus the user's attention on the selected asset.
In Zoomforth, several types of content can be displayed in an overlay, including expanded images, videos, PDFs, and HTML packages.
You can apply custom styling to an image overlay by adding a CSS class to the overlay asset.
Add a CSS Class to an overlay
Select the image you want to open in an overlay or expanded view.
Click the Action tab.
Under On click, click Edit / Preview.
In the CSS Classes field, enter the CSS class you want to apply to the overlay asset.
Click Finish Editing to save your changes and exit the image tile's editing mode.
Click Done Editing Tile to confirm and finalize the changes.
Tip: Make sure the CSS class you enter matches a class defined in your site's CSS. Adding a class name without corresponding CSS rules will not change the appearance of the overlay.
Design customization for overlay assets can be done using CSS classes.
Need Help?
Contact Zoomforth Customer Support through the in-app chat or email support@zoomforth.com.