top of page

Applying hover interactions to Repeater items

Follow along with technical designer Ido as he explains how to create a hover interactions on Repeater items. In this exercise, we’ll recreate the design that was used in the Mid-Year Digital Design Trends Report.

What do you think about the course so far?

Thank you for your feedback!

How can we improve?

Thanks for submitting!

Explore more topics

Additional resources

Visit our help center

Ask the community

Hire an expert

Contact customer care

Ido Hershkovits

Technical Designer

I’m a web developer and Editor X specialist based in Tel Aviv. I work closely alongside the Editor X marketing team as a coding and responsive design expert. In my spare time, I’m a passionate musician and producer.

How to create hover interactions on Repeater items.

Part 1: Building the basic layout

To follow along with this exercise, open up the template in the editor.


1. Apply a 2x2 grid to the section.

2. Select ‘Edit Grid’ then, select ‘Advanced Mode’, set the left-column width to 1087px, then convert it to fr. Adjust the height of the rows:

  • Row 1: 2.5 vw

  • Row 2: 14.3 vw

3. From the Add panel, drag in a Repeater to the bottom-left grid cell.

4. From the dropdown, choose the “List” layout.

5. In the Inspector panel, adjust each item height to 86px.

6. Stretch the repeater to fill the entire grid cell.

7. Remove the background color by setting the background to 0 opacity.

8. Add a horizontal line to the item and then stretch it.

9. In the Inspector panel, dock the line to the bottom and remove all margins.

10. From the Add panel, drag in a container and stretch it.

11. Apply a grid of three columns to the container. And from the ‘Advanced Mode

and make the following adjustments:

  • Column 1: 1fr

  • Column 2: 5.4fr

  • Column 3: 0.1fr

  • Row height: 4.5vw

12. Change the background of the container to be transparent.

13. Add text to the left and center grid cell and  change the font-size to ‘scale-text’ with a range of 20 - 25 and set the text element width to max content.

14 .Add an arrow icon to the right column.


Part 2: Building the hover container

15. From the Add panel, add a new container and set the container’s width to 241px, the height to 348px, and set minimum height to none.

16. From the Inspector panel, add 6.5% padding on all sides.

17. Apply a grid of 2 rows, adjust the height of the rows:

  • Row 1:  14.9vw

  • Row 2:  1.6vw

18. From the Media Manager, add an image to the top grid-cell and stretch it.

19. Add some text to the bottom grid-cell, set the font-size to ‘scale text’ from 12-16 and the text element width to max content. Align the text to the left and vertical center, checking it’s in the bottom grid cell.

20. Set the container to Fluid and the height to “Auto”.

21. In the Inspector panel, under design, round the corners of the container and the image by setting the radius to 12px.

22. Attach the hover container to the Repeater item and align it to the horizontal and vertical center.

23. Add a right-margin of -28% to the hover-container.


Part 3: Adding the hover interaction to the container

24. In the Inspector panel, select the interactions button and Add an Effect.

25. Then select a Custom Effect, name it “Hover”.

26. From the dropdown menu, set the image to rotate and display on hover.

27. Still in the dropdown menu, choose the initial state and set the card’s container opacity to 0 and set the scale to 100.1%.

28. Add a trigger and choose Hover”, select the effect created and press Done.”

29. From the Layers panel, view the card and then update the image and text in each card so that different content appears on each hover.


ResultWhen you hover over each line in the Repeater, a different card will appear, each with a new image and text.


EXPLORE MORE TUTORIALS

TUTORIAL

Click & hover interactions

TUTORIAL

Background scroll effects

TUTORIAL

Creating a full page sticky scroll effect

bottom of page