Multi-element hover effect

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

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.

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.

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

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

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

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

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