Overlay add-on

Create an image overlay, which comes in different styles.

Overlay Cover

Overlay Image

Strategy & Research.

Understanding our clients‘ business objectives always comes first. We consider our clients’ growth as the measure of our success.

Overlay Caption

Managment & Marketing

Managment & Marketing

Understanding our clients‘ business objectives always comes first. We consider our clients’ growth as the measure of our success.

Overlay - Caption Default Style

Uikit Image

Overlay

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Overlay - Caption Muted Style

Uikit Image

Overlay

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Overlay - Caption Primary Style

Uikit Image

Overlay

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Different Image on Hover

Uikit Image
Uikit Image

Overlay

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Without Overlay on Hover

Uikit Image

Overlay

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Without Overlay on Hover

Uikit Image

Overlay

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Link Type: Button

Uikit Image

Overlay

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Link Type: Title

Uikit Image

Overlay

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Link Type: Item

Uikit Image

Overlay

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Overlay Top

Uikit Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed faucibus dignissim.

Overlay Top Left

Uikit Image

Mission & Values

Overlay Center Left

Uikit Image

Mission & Values

Top Center

Uikit Image

Mission & Values

Bottom Left

Uikit Image

Mission & Values

Overlay Bottom

Uikit Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed faucibus dignissim.

Overlay Top Right

Uikit Image

Mission & Values

Overlay Center Right

Uikit Image

Mission & Values

Bottom Center

Uikit Image

Mission & Values

Bottom Right

Uikit Image

Mission & Values

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.

Information

Joomla! name is used under a limited license from Open Source Matters in the United States and other countries. WarpTheme.com is not affiliated with or endorsed by Open Source Matters or the Joomla! project