top of page

Multi-element hover effect

Editor X Team


Apr 20, 2023

Multi-element hover effect

Multiple elements move to reveal text behind them with this creative hover effect.

Design: Sari Lorber, Tech design: Tal Shenkar, Sari Lorber

Learn how to create this design in 8 steps

1. Open the Add panel and add a container. Set the container’s width to 100%

image of step 1

2. From the Inspector panel, set the container’s height. Use Calculation and set the height to 100vh minus the height of the header. Set the minimum height the same way, so the container and header will take up the full height of the screen.

image of step 2

3. Place text and all of the design elements in the container. Make sure the size of all the elements is in percentage and that they’re set to Scale proportionally to keep the design responsive.

image of step 3

4. Select the container. Open the Interactions tab in the Inspector panel. Under Effects, add a custom effect. 

image of step 4

5. Design the effect by selecting each element and adjusting the translate and scale so they will move and resize. Then, click Done

image of step 5

6. With the container still selected, go to the Triggers tab. Add a new trigger and choose Hover

image of step 6

7. From the dropdown under Effect, choose the effect you just created. Click Done

image of step 7

8. Preview to see the effect. When you hover over the container, all of the elements move to reveal the text behind them.

Refresh your skills before you start by visiting Academy X.

More inspiration



Editor X

The rest is up to you.

bottom of page