Overlay Particle Documentation

  • JoomLeadTeam
  • 30 September 2018
  • No comments
  • Docs
Create an image overlay, which comes in different styles. Give user the flexibility to display image with content. See how Overlay can be designed beautifully on Demo Page.

# Overlay Package contents

Files Description
jloverlay.yaml Contains the Overlay particle settings.
jloverlay.html.twig The Twig file to pull information, settings.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Requirements Overlay requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

Go to Template/Theme Settings > select the Layout to add Overlay particle (i.e: Home) -> Layout tab -> Drag and drop the Overlay Particle from Particles panel (left corner) to the section you want to display the Overlay.

Settings

Settings Description
ImageAn image field with an image picker.
Background ColorUse the background color in combination with blend modes.
Blend ModeDetermine how the image will blend with the background color.
Overlay ColorSet an additional transparent overlay to soften the image.
Image AltEnter the image’s alt attribute.
TitleCustomize the Title.
MetaCustomize the Meta.
ContentCustomize the content.
LinkEnter the image’s link if needed.
TargetTarget browser window when item is clicked.
Link TextSpecify the button label.
Link ARIA LabelEnter a descriptive text label to make it accessible if the link has no visible text.
Hover ImageSelect an optional image that appears on hover.
CSS ClassesCSS class name for the particle.

Overlay Tab

Settings Description
Container
Fill column spaceFll the available space in the overlay.
Link overlayLink the whole overlay if a link exists.
Overlay Settings
ModeWhen using cover mode, you need to set the text color manually.
Overlay on hoverDisplay overlay on hover
Animate backgroundAnimate background only
Overlay StyleSelect the style for the overlay.
ColorSet light or dark color mode for text, buttons and controls.
Inverse text colorInverse the text color on hover.
PaddingSet the padding between the overlay and its content.
Expand contentExpand the height of the content to fill the available space in the overlay and push the link to the bottom.
PositionSelect the overlay or content position.
MarginApply a margin between the overlay and the image container.
Max WidthSet the maximum content width.
TransitionSelect a transition for the overlay when it appears on hover.

Tab Style

Image Settings Common settings for images.

Settings Description
Image Style
Load image eagerlyBy default, images are loaded lazy. Enable eager loading for images in the initial viewport.
WidthSet the width of the image.
HeightSet the height of the image.
Image TransitionSelect 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 ShadowSelect the image’s box shadow size.
Hover Box ShadowSelect the image’s box shadow size on hover.
Title Style
TransitionSelect a transition for the title when the overlay appears on hover.
StyleTitle styles differ in font-size but may also come with a predefined color, size and font.
Link titleLink the title if a link exists.
Hover StyleSet the hover style for a linked title. Enable link title to use this option.
DecorationDecorate the headline with a divider, bullet or a line that is vertically centered to the heading.
Predefined ColorSelect the text color. If the Background option is selected, styles that don’t apply a background image use the primary color instead.
Custom ColorCustomize the title color instead using predefined title color mode.
Font SizeCustomize the title text font size.
TransformThe following options will transform text into uppercased, capitalized or lowercased characters.
Font weightAdd one of the following classes to modify the font weight of your text.
HTML ElementChoose one of the elements to fit your semantic structure.
Margin TopSet the top margin. Note that the margin will only apply if the content field immediately follows another content field.

Meta/Content Common settings for title and meta style.

Settings Description
Meta Style
TransitionSelect a transition for the meta text when the overlay appears on hover.
StyleSelect a predefined meta text style, including color, size and font-family.
Predefined ColorSelect the predefined meta color.
Custom ColorCustomize the meta color. You need to set the Predefined Color to None before using the color customization.
Font SizeCustomize the meta text font size.
TransformThe following options will transform text into uppercased, capitalized or lowercased characters.
Font weightAdd one of the following classes to modify the font weight of your text.
AlignmentAlign the meta text.
HTML ElementChoose one of the elements to fit your semantic structure.
Margin TopSet the top margin. Note that the margin will only apply if the content field immediately follows another content field.
Content Style
Process TwigEnable Twig template processing in the content. Twig will be processed before shortcodes.
Process shortcodesEnable shortcode processing / filtering in the content.
TransitionSelect a transition for the content when the overlay appears on hover.
StyleSelect a predefined content style.
Predefined ColorSelect the text color. If the Background option is selected, styles that don’t apply a background image use the primary color instead.
Customize ColorCustomize the content color instead using predefined text color. You need to set the Predefined Color to None before using the color customization.
Font SizeCustomize the content text font size.
TransformThe following options will transform text into uppercased, capitalized or lowercased characters.
Font weightAdd one of the following classes to modify the font weight of your text.
Margin TopSet the top margin. Note that the margin will only apply if the content field immediately follows another content field.

Link Settings Common settings for Link.

Settings Description
Transition Select a transition for the link when the overlay appears on hover.
Target Target browser window when item is clicked.
Style Set the button style.
Button Size Set the button size.
Font weight Add one of the following classes to modify the font weight of your text.
Margin Top Set the top margin.

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Comments

Leave a Reply

You must be logged in to post a comment.

80+ Joomla templates updated for Joomla 5.3 and JoomLead particles 2.3.2 Download
Flash Sale. Get Up to 25% Off - Coupon: FLASH25 Shop Now