How to create hover interactions on Repeater items | Editor X

Hey there, design enthusiasts! We're back with another exciting tutorial for you, and today, we'll show you how to create a nifty hover interaction that reveals a card on repeater items using Editor X. This type of interaction can be an eye-catching addition to your design projects and help you enhance the user experience on your websites.

Before we begin, don't forget to check out livelearning.editorx.io for monthly NoCode Design Challenges with prizes and to join our community of like-minded designers. We also offer mentoring on building design businesses and furthering your career – because we believe that learning should never stop.

Setting up the Section and Grid

Start by creating a new section in your project and add some padding on all sides to create some space for our design elements.

To set up our grid, apply a grid layout of two rows and two columns. To ensure that our design remains pixel-perfect and responsive, we're going to make a few adjustments.

Head to Advanced Mode, and set the left column width to 1087 pixels. Convert the width to 'fr' (fluid units) to make the layout responsive across different breakpoints. Adjust the height of the rows as well – set the first row height to 2.5 vw and the second to 14.3 vw.

Adding the Repeater

Drag a Repeater element and place it on the bottom-left grid cell. From the drop-down menu, choose the 'List Layout' option. In the Inspector panel, we can see that each item has a minimum height of 300 pixels. To avoid collapsing our item, let's change the minimum height to 86 pixels to obtain the correct dimensions.

Stretch the Repeater to fill the entire grid cell, remove its background color by setting the background opacity to zero, and add a horizontal line inside the item. Dock the horizontal line to the bottom, and remove all margins.

Next, add a container to the item, stretch it, and apply a grid layout of three columns. Adjust the column width and row height using Advanced Mode once again to make sure everything is pixel-perfect.

Designing the Repeater Items

It's now time to design the individual repeater items. Inside the container, add your desired elements such as text, images or icons, and place them within the columns of the grid. Play around with the arrangement, sizing, and styling of these elements until you're happy with the overall appearance.

Creating the Hover Interaction

Now that our repeater items are designed, let's create the cool hover interaction effect!

Select the Repeater item, and add an Interaction to it from the Inspector panel. Choose the 'Hover' trigger and create a new animation. Here, we'll control the appearance of the card on hover, so use the 'Opacity' property to adjust the card's visibility.

Set the default state of the card's opacity to zero to make it invisible, and create a keyframe at the beginning of the Timeline for the card's opacity property. Now, add another keyframe further along the Timeline, and set the opacity to 100. This transition will create a smooth fade-in effect when hovering over the repeater item.

Add another Interaction to the Repeater item, this time with a 'Mouse Out' trigger, to ensure the card disappears when the mouse is no longer hovering over the item. Create a new animation for this trigger and animate the opacity property again – but this time, set the opacity back to zero.

Wrapping Up

And there you have it! With a few simple steps and a bit of creativity, you've created an attention-grabbing hover interaction that reveals a card on repeater items. You can use this technique to add more interactivity to your Editor X designs and keep your users engaged.

Remember to visit livelearning.editorx.io for more design resources, community events, and expert guidance on building your design business and boosting your career. Why wait any longer? Start exploring new design horizons, and join our community today!