Click and hover interactions.

Apply and customize click and hover interactions on and between site elements on Editor X to create engaging, dynamic web experiences.

Apply and customize click and hover interactions on and between site elements on Editor X to create engaging, dynamic web experiences.

Let’s explore how to use hover and click interactions on Editor X.


We can define hover or click Interactions on elements and between elements, meaning clicking or hovering on one element will animate another. Interactions are applied to all breakpoints, but on mobile and tablet they’ll appear as tap interactions.


Let’s dive into how it works.


First, we’ll create an interaction where an element grows and rotates on hover.  We’ll select the element we want to work on, click Add a Trigger and choose Hover.


In the Inspector panel, we can see the Affected element dropdown. 

The affected element is the element that will respond to the hover interaction. It can be the same element as the one that we interact with or another one. In this case, it will be the same element. Under Action type we can choose if we want to apply or remove an effect. Let’s apply one.


From the Effect dropdown we can choose from a list of preset options, but for this example we’ll create a custom one.


Elements can have multiple effects, and each effect must have a name. We’ll choose one for this effect and then hit Start Designing.


Now the editor will enter effect design mode. We’ll use the Inspector panel to control the design. Under Adjust, you’ll see options to change the opacity, rotation, scale, skew and translate settings for the element.


You’ll also find options for designing the fill color and opacity, adjusting the border, the corners and adding a shadow.


To create the rotation we want, we’ll set the rotation property. And, to make the element grow, we’ll set the scale property. Under Timing, we’ll set the duration of the transition to 0.2 seconds and set the Easing to Ease in and out for a gradual flow.


Now we’ll preview the effect by clicking Play. Once everything looks good, click Done to finish the set up.


In the hover trigger list in the Inspector panel, you’ll see that the hover interaction is now set to apply the effect we created on the element.


To check how the interaction will look when the site is live, we’ll enter Preview mode and hover over the element.


As we’ve said, interactions apply to all breakpoints. On tablet and mobile devices, hover and click interactions will automatically convert to on tap interactions. You can decide to keep, adjust or remove the interactions on each breakpoint.


Let’s see how we can disable this hover interaction on a smaller breakpoint. For this example, we’ll go to the tablet breakpoint. Then we’ll remove the interaction under Hover in the Inspector panel by clicking on the trash icon. To disable multiple interactions, just click the trash icon beside each one.


Note that if we delete an entire trigger, it will be deleted on all breakpoints.


Because of the cascading rule, since we disabled the interaction on tablet, it will also be disabled on mobile. However, it will still appear on desktop. To edit interactions on any breakpoint, just click on the interaction name.


If we want to edit the element effects, we can click the pencil icon next to the effect name in the Inspector panel.


Let’s preview again to see those changes. On desktop, the hover interaction is working, but on tablet and mobile it’s disabled.


Now we’ll move on to adding a click interaction that’ll work alongside our hover interaction. For this example, we’ll create a behavior where, when this circle element is clicked, the containers will go from being on top of each other to lining up next to each other.


First, we’ll choose the circle button, click on Add a trigger and choose Click. We’ll then choose the affected element. We’ll select the relevant container on the canvas and then click Done.


In the Action type dropdown for click interactions, we have 4 options. Apply an effect, which will trigger the chosen effect with no option to remove it. Toggle an effect on and off, which will trigger the chosen effect on one click and remove it on another. The last two options are Remove a specific effect and Remove all the effects that have been triggered before. In this case we will choose Toggle an effect on and off.


Next, we’ll set up a custom effect here as well. We’ll then set the name and click Start Designing.


Now we’ve entered effect design mode once again. In this design, we want our cards to be on top of each other as the site loads. To do that, we’ll access the initial state from the dropdown. The initial state refers to the look, size and position of an element as the page loads.


Under Adjust we’ll set the container’s properties to be positioned as we want. In this case that’s in the middle, next to the middle card, to create a stacking effect. To do this, we'll set Translate to 80%. This refers to where the card will be positioned when the page loads.


Now we’ll go back to the custom effect state to make sure the properties are set up the way we want them. Since the card position is lined up and the Translate property at 0, we don’t need to change anything.


Let’s see how it looks by clicking Play. Since it looks good, let’s hit Done.


If you’d like to trigger multiple elements on click or hover, just add more interactions. Here, we’ll add one more click interaction to trigger the right card as well. Both cards will then be triggered when the circle container is clicked.


We’ll choose the affected element: the right card. We’ll then change the Action type to Toggle an effect on and off, create a custom effect, name it and start designing.


For the initial state, we want the card to be positioned close to the middle card to achieve a stacked appearance, so we’ll set Translate to -80%. For the custom effect applied to the card, we’ll keep the translation on 0 to keep the “lined-up” effect.


Let’s click Play to make sure everything looks good and then click Done.


Let’s preview to see the final result with both the hover and click interactions. On hover, the circle element grows and rotates and, on click, the cards move next to each other. On another click, the cards go back to their initial position.


Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.

NEXT VIDEOS

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

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

Learn how to apply interactions to any element on hover.

Beige background with an photo of a man in a small circle in the center.

FROM THE X TEAM

Header Scroll Effects

Follow Yanay's 3 how-tos to create interesting header scroll effects.

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
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 ▶