Overlays With
Hover Transitions
SiteOrigin Overlay Widget
The SiteOrigin Overlay widget overlays two sets of content with a transparent separation. The content for each layer is built with page builder, the overlay can be visible or only shown on hover.
Overlay any content over another.
Use hover transitions from the global transition list.
Use any position from the global position list.
Adding Content
Overlays use two sets of page builder content. The main Content which is always visible and the Overlay Content which is imposed on top or transitioned on hover.
CONTENT
Overlay Content
Overlay Color
The background color of the overlay is handled by the Overlay Modifier taken from your global Overlay settings and can be in one of two colors, Default and Primary or Transparent.
CONTENT
Primary Overlay
CONTENT
Default Overlay
CONTENT
Transparent Overlay
Overlay Position
Positioning the Overlay Content inside the main Content is handled by the Position Modifier. The positioning can use any of the global Position and Position Size modifiers. For more information on positioning see the Feature Position information.
CONTENT
Position Small Bottom Left
CONTENT
Position Small Top Right
Cover Position
The Cover Position is an edge case and may require additional modifiers to position the Overlay Content. The Horizontal and Vertical modifiers will position the content inside the Overlay Content.
CONTENT
Center Middle Cover
Overlay Transitions
The Transition Template enables the required modifiers to transition in Overlay Content when hovered or focused. The Overlay Content can use any of the global transitions.
CONTENT
Primary Overlay
Content Transitions
Transitions can also be applied to the main Content of the Overlay widget with the Content Transition Modifier adding an additional layer of feedback to the user.
CONTENT
Primary Overlay
Primary Overlay