Overlay Cover
Overlay Caption
Overlay - Caption Default Style
Overlay - Caption Muted Style
Overlay - Caption Primary Style
Different Image on Hover
Without Overlay on Hover
Without Overlay on Hover
Link Type: Button
Link Type: Title
Link Type: Item
Overlay Top
Overlay Top Left
Overlay Center Left
Top Center
Bottom Left
Overlay Bottom
Overlay Top Right
Overlay Center Right
Bottom Center
Bottom Right
Content Fields
Overlay settings, learn more about the overlay add-on settings. Here is a short overview.
| Setting | Description |
|---|---|
| Image | Select the an image for overlay |
| Image ALT | Insert Alt text, which is an important for SEO purposes and part of making a site accessible.. |
| Title | Add your overlay title |
| HTML Element | Choose on of the elements to fit your semantic structure. |
| Style | Heading styles differ in font-size but may also come with a predefined color, size and font |
| Content | Add your overlay content |
| Add Link | Enter or pick a link, an image or a video file. |
| Link opens | Open the link in a new window |
Overlay Style Settings
Overlay style settings, learn more about the overlay style add-on settings. Here is a short overview.
| Setting | Description |
|---|---|
| Mode | Select the cover or caption mode for overlay. When using cover mode, you need to set the text color manually. |
| Display overlay on hover | Display the overlay content when hovering. Default is checked |
| Title Transition | Select a hover transition for the title. |
| Content Transition | Select a hover transition for the content. |
| Style | Select a style for the overlay (support 06 styles) |
| Text color | Set light or dark color mode for text, buttons and controls |
| Padding | Set the padding between the overlay and its content. |
| Overlay Positions | A collection of utility classes to position content (support 13 positions) |
| Margin | Apply a margin between the overlay and the image container. |
| Overlay Transitions | Select a hover transition for the overlay. |
Overlay Image Settings
Overlay image settings, learn more about the overlay image add-on settings. Here is a short overview.
| Setting | Description |
|---|---|
| Transition | Select an image transition. If the hover image is set, the transition takes place between the two images. If None is selected, the hover image fades in. |
| Box Shadow | Select the image's box shadow size. |
| Hover Box Shadow | Select the image's box shadow size on hover. |
General Settings
General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.
| Setting | Description |
|---|---|
| Margin | Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom. |
| Remove top margin. | Use this option to remove the add-on's top margin |
| Remove bottom margin. | Use this option to remove the add-on's bottom margin |
| Animation | Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on. |
| Alignment | This option specifies the alignment of an add-on according to the surrounding element |
| Text Breakpoint | Define the device width from which the alignment will apply. |
| Visibility | Define when the add-on should be hidden. |
| CSS Class | If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file. |