Asteroid hover interaction

1. From the Inspector panel, set the height of a blank section to 100vh. 

2. Design the section and add text elements. Then add the transparent video and center it in the section.

Note: If a section background has a media or pattern overlay, it’s not possible to apply interactions to it—including the background color change interaction in this design. To add a pattern background like the one you see here, upload it as a transparent image, stretch it to fill the section and arrange it behind all of the elements.

3. Add a container and position it over the transparent video. Set its opacity to 0%. This container will hold all of the elements you’ll add interactions to.

4. Add an ellipse SVG to the container.

5. Add plus icons and place them along the ellipse. Set the width of each one to 2%, dock to the center, and make sure the margins are in percentage.

6. Add the first hover SVG image to the container (this is the image that will appear when you mouse over the first plus icon).

7. Add a custom effect to the hover image. In the floating menu, open the dropdown and switch to the Initial state. Change the image’s opacity to 0% so it won’t be visible when the page loads. Click Done.

8. Select the section and add a custom effect. Change the section background color. Click Done.

9. Select the first plus icon. Select the Triggers tab and add a trigger for the hover interaction. Under Affected element, hit Choose on Canvas and select the hover image you added earlier. Apply the effect you created for the image.

10. With the icon still selected, add another interaction trigger. This time, the affected element is the section, and the effect is the background color change.

11. Repeat steps 6-10 to create the same hover effect for the remaining 3 icons.

12. Preview to see the final result. As you mouse over each of the plus icons, the background color changes and an image is revealed inside the ellipse.