The Overlay element displays an image with a content overlay. It has Image, Video, Title, Meta, Content, Link and Hover Image fields.
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.
The overlay has various style options. It can look like a transparent overlay or an opaque tile, or show just the content.
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.
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.
Image Transitions and Hover Image
Select an image transition. If the hover image is set, the transition takes place between the two images.
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.