Ido Hershkovits profile picture

Ido Hershkovits

Technical Designer

,

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.

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.


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

How to create hover interactions on Repeater items.
Part 1: Building the basic layout
Part 2: Building the hover container
Part 3: Adding the hover interaction to the container
Ido Hershkovits profile picture

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.

Did you find this lesson helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Code & Dev
Arrow down icon
Collaboration
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

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.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

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.

See all results ▶