Jul 13, 2022
Hover Interactions on 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.
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.
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.
Did you find this lesson helpful?
Thank you for your feedback!
Related learning resources.
LESSONS & EXERCISES
LESSONS & EXERCISES
Ready to start creating?
People are searching for
Introducing Editor X
Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.
Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.
LESSONS & EXERCISES
Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.