Overlay

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

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.

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

Cameras & Lenses

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.

Text Transition

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

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.

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.

Get Hundreds of YOOtheme Pro
Features All in One Package.