How to swap widgets using a Mouseover Effect

In many cases, we may need to change a text element or swap an image on mouse hover. This can be achieved using the opacity effect. This will make the top element fully transparent on hover, revealing the element beneath. Please find the preview URL below for an example.

Example Mouseover

How to add this effect:

• Place both the text or image elements on top of each other. The element you want to display initially should be on top, while the element that you want to display on mouse hover should be beneath it.
• Next, select the top element.
• Go to the Effects option under the Design category on the right side of the Frontend Visual Designer.
• Click the "+" icon next to Effect option.
• Choose the Mouseover effect. From the available effects.
• Select Opacity and set it to 0%.

This is how you can create an image or text swap on mouse hover. If you have any additional questions, please feel free to reach out to us at support@getfastr.com