Overlay - Create an image overlay, which comes in different styles.
Overlay - Caption Mode
Overlay - Without Overlay on Hover
Overlay - with custom link when hovering
Overlay settings, learn more about the overlay add-on settings. Here is a short overview.
|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, learn more about the overlay style add-on settings. Here is a short overview.
|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, learn more about the overlay image add-on settings. Here is a short overview.
|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, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.
|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.|