Overlay

The Overlay element displays an image with a content overlay. It has Image, Video, Title, Meta, Content, Link and Hover Image fields.

Awards

Sylvia Ward Is the Winner of the Song Contest 2020

Mode

The overlay can be displayed as a cover or a caption. Show the overlay from the beginning or only on hover. Select a hover transition. Additionally, there is an option for the cover mode to only fade in the background while the overlay content is visible from the beginning. Mind, there is minimum height option for the image to prevent the content overlay from becoming larger than the background image on small devices.

Cover

Caption

Tile Default as Cover

Display Always

Tile Default as Caption

Display Always

Tile Default as Cover

Display on Hover

Tile Default as Caption

Display on Hover

Tile Default as Cover

Animate Background Only

Style

The overlay has various style options. It can look like a transparent overlay or an opaque tile, or show just the content.

Cover

Caption

Overlay Default as Cover

Display on Hover

Overlay Default as Caption

Display on Hover

Overlay Primary as Cover

Display on Hover

Overlay Primary as Caption

Display on Hover

Tile Secondary as Cover

Display on Hover

Tile Secondary as Caption

Display on Hover

Text Color

Set the text color for the overlay content to either light or dark. If necessary, inverse the text color on hover, for example, when using a hover image or when a different background fades in on hover.

Headphones

Lorem ipsum dolor sit amet, consectetur

View Collection

Smartwatches

Nulla consequat massa quis enim

View Collection

Position

Select the padding between the overlay and its content. There are various options to position the overlay and its content in regards to the overlay image. Additionally, if a style is selected, apply a margin between the overlay and the image container and set the maximum content width.

Phones & Tablets

Be Creative Everywhere.
Rent Apple iPad Pro

Save Your Memories for Later
With Our Cameras

Image Transitions and Hover Image

Select an image transition. If the hover image is set, the transition takes place between the two images.

Mountain Escapes

Discover all

Fall/Winter Collection

Shop all

Text Transition

Select a transition for the title, meta and content when the overlay appears on hover.

Sneaker

Online Campaign

Pantheon

Brand Identity

Link

There are various options to link the Overlay element. Either link the title separately or link the whole overlay. Additionally, set the hover style for the title. The style is kept even if the whole overlay is linked.

Link Title and Button

Link All

More Settings

Options for the different content fields are very similar across all elements. They are described in the corresponding Image, Headline, Text and Button element documentation. Mind that multiple overlays can also be displayed in the Gallery or Overlay Slider elements.