Get Elements Hive

Gooey Overlay

The Gooey Overlay container element allows you to show or reveal your content via a number of stylish overlay transitions. Being a container element, you can add any elements that you need for your design. It has a lot of use cases like a click to reveal more types of UI patterns, fullscreen menus, side panels, and more.

Content Tab

Layers

  • Add Item: Add a new layer to the overlay and define a background color

 

Design Tab

Trigger

  • Selector: A valid CSS selector of the element to use as a trigger to toggle the overlay

 

Effect

  • Effect Style: The transition effect style
  • Direction: The direction of the transition effect
  • Layers Distance Factor: The distance factor between each of the layers
  • Duration: The transition duration

 

Container

  • Width: The width of the overlay container
  • Height: The height of the overlay container

 

Builder Mode Helpers

  • Disable Placeholder: Disables the placeholder is shown when the overlay is closed in builder mode
  • Toggle Overlay: Open/Close the overlay. Use this when you are editing the content you have inside the overlay so it remains visible or if you haven’t set a trigger yet and want to open the overlay