Tip: Setting up animations and effects in Studio.Design
In Studio.Design, you can set up motion-based expressions like animations and effects using Conditional Styles.
When you apply both a default style and a conditional style to a box element on your site, the difference between them plays as an animation. You can fine-tune how the animation moves using three settings: Easing, Duration, and Delay.
With the "Scroll" option under Conditional Styles, you can create effects where elements move as the user scrolls.
By stacking two images and using the "Hover" Conditional Style to make the top image transparent only when hovered over, the image underneath becomes visible — making it look like the image has been swapped. The trick is to lower the opacity of the top image so the one below shows through.
Set up an image swap on hover
Note: Touch devices don't support hover interactions, so the result may not appear as intended.
Place image ① on the page — this is the image you want to show on hover.
Place image ② on top of it — this is the image you want to show by default. Making the parent image larger can make this easier to set up.
Set the size of image ② (the top image) to 100% width and 100% height.
Select image ② (the one shown by default).
Using the Layers panel makes it easier to select the right image.
At the top of the right panel, click [Conditional Style] and choose [Hover] from the menu.
Click the [Custom] button.
Under [Appearance], set the opacity to 0.
Once you're done, click the [Back] (arrow icon) button to the right of the [Hover] label in the right panel to return to the default state.
Check how it works in Live Preview.
If you're editing a site that's already live, update your site from the Publish panel. Your changes won't appear on the live site until you do this.