Applying hover interactions to 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.

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