This tutorial covers how to add an on-hover zoom effect to images as in the following video:
Skill set: Basic
Area: UI
Video Length: ~2 min
- You'll need a Builder account.
- An evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.
The following instructions demonstrate how to set up images to zoom on hover.
Tip: Using the Columns block is optional and in this tutorial is only used for demonstration. You only need an Image block nested within a Box block to set up the zoom effect.
- Optional: drag a Columns block from the Insert tab into the work area.
- Add an image to the Image block.
- Add a Box block above the image.
- In the Style tab > CSS Properties, click + New and in the property name field, enter
overflowand set the value tohidden. - Drag the Image block into the Box.
- Make sure the Image block is selected. Tip: to check that you have placed the Image within the Box, check the Layers tab.
- Go to the Animate tab.
- Click the + Animate button.
- For trigger, select Hover.
- Still in the Animate tab, within the CSS Properties section, click + New and in the property name field, enter
transformand set the value toscale(1.5). - In the Animate tab, click the three dots near the bottom under Easing to Ease in.
- Test by hovering over the image to trigger the zoom animation.
For more information on images, read Working with Images.
Was this article helpful?