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
overflow
and 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
transform
and 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.