Hover Swapper
Hover Swapper switches between two child elements on hover. Use it for a paired image or a small visual state change.
Add and configure Hover Swapper
- Click Add, choose Hover Swapper, and place it in the container.
- Place two elements of the same size inside Hover Swapper, as directed by its Content notice.
- Configure Design > Effect and Spacing.
- Check the normal and hovered presentation on the front end.
- Save your changes.
Controls
Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”
Content > New Section
Place two elements of the same size inside the Hover Swapper.
Design > Effect
| Setting | Purpose and options | Behavior |
|---|---|---|
| Effect | Fade, Slide Left, Slide Right, Slide Up, Slide Down. | Shared |
| Duration | Duration and unit. | Shared |
Design > Spacing
| Setting | Purpose and options | Behavior |
|---|---|---|
| Spacing | spacing controls. | See linked controls |
Troubleshooting
The swap changes the layout size
Give the two child elements matching dimensions.
The second state is hard to reach on touch screens
Test the saved page on a touch device. Do not put essential information only in the hover state.