The Superbox element allows you to create animated hover effects between two slides of content.
Add a Superbox element to your page from Add+ > Helpers > Superbox.
Superbox Structure
The Superbox element consists of two slides of content - Primary, and Secondary.
The Superbox (and the Secondary slide) will take on the size of the content in the Primary slide.
Any elements can be placed inside the Primary and Secondary slides.
By default, there is an Image in the Primary slide, and text in the Secondary slide. You can delete the Image and Text and place your own elements in the slides.
Placing & Editing Elements In Slides
Depending on your Superbox settings, a slide may fade out when you mouse over it, making it impossible to click its contents for editing purposes.
To work around this, use the Superbox Editing Mode to force the display of the primary or secondary slide.
Set the Superbox Editing Mode back to Live when you are done editing.
Creating Hover Effects
Animation Speed (in seconds) is the speed of the transition effects on each slide.
Control the display of the Primary and Secondary slides and what happens when the mouse is hovered over the Superbox in the Primary and Secondary sections.
- Slide Direction - select in or out, and then select left, right, top, or bottom.
- Initial Opacity - control the initial opacity of the slide.
- Opacity on Hover - control the opacity of the slide on mouse hover.
- Initial Scale - control the initial size of the slide relative to its original size.
- Scale on Hover - control the size of the slide relative to original size on hover.
