top of page

Asteroid hover interaction

Eliran Vahdi


Feb 5, 2023

Asteroid hover interaction

A space-themed section with hover interactions that reveal orbital images and changing background colors to create an engaging experience.

Learn how to create this design in 12 steps

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

image of step 1

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.

image of step 2

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.

image of step 3

4. Add an ellipse SVG to the container.

image of step 4

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.

image of step 5

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).

image of step 6

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.

image of step 7

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

image of step 8

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.

image of step 9

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.

Refresh your skills before you start by visiting Academy X.

More inspiration



Editor X

The rest is up to you.

bottom of page