Hover Swapper

The Hover Swapper element lets you swap content when a user hovers over the element, providing an easy way to create some interactive effects on your website. The element allows you to change the hover effect and transition.

Some examples of how you may use the Hover Swapper element may include: 

• Image Swap – Change an image when hovered over. This is the default setup for the element
• Text Swap – Displaying different text when a user hovers over the element.
• Call to Action – If you have a section that entices a user to hover over it, you may wish to have a button or other CTA become available.
• Portfolio Effect – Reveal additional information about a team member or portfolio item when a user hovers over it.

How to Use This Element

The Hover Swapper allows you to swap between two elements when the user hovers over them. Follow these steps to add and configure it in your design.

1. Add the Hover Swapper Element
   • Open your design in Breakdance.
   • Locate the Hover Swapper element in the elements panel.
   • Click the element or drag and drop it onto your page.
2.  Add the Elements to Swap
   • Inside the Hover Swapper, add the two elements you want to swap. These could be Images, Text, Buttons, Divs, or any other element.
   • Arrange the two elements in the desired order within the container.
3. Change the Effect
   • Select the Hover Swapper element.
   • Go to Design > Effect
   • Select the Effect control and choose the desired effect.
   • Adjust the Duration to speed up or slow down the effect.

Default Properties

The Hover Swapper element includes two Images as the default style. You’ll want to replace the images with your images.