Hover interactions.

Apply interactions to any element on hover to design dynamic web experiences on Editor X. Customize the interaction settings for every breakpoint, from appearance to transform properties and timing control.

Apply interactions to any element on hover to design dynamic web experiences on Editor X. Customize the interaction settings for every breakpoint, from appearance to transform properties and timing control.

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


There’s a lot to cover so let’s dive in.


Hover interactions let you control exactly how and when elements appear on your site. In this tutorial, we’ll be adding multiple hover interactions to two different sections of this music festival site.


You can also create different interactions for every breakpoint.


On tablet and mobile devices, hover interactions will automatically convert to on tap interactions.

So let’s get into the feature capabilities.


To add an interaction to an element, you need to apply it to its parent container. So we’ll use the Layers panel to select the container we need.


We’ll open the Inspector panel on the right, select the interactions tab and add a hover interaction.

You’ll find this dropdown menu with a selection of preset transitions like grow, shrink, float and much more.


For our design, we want to set up a custom interaction instead.


You’ll notice this floating action bar appear on your canvas.


When setting up a hover interaction, you can define what your element looks like in its Initial and Hover state. The Initial state is what you see immediately after the site loads. The Hover state is what you see when you mouse over the element.


From here, you can also access the timing panel to set the Duration and Ease type, and you can play your interaction while you’re still designing it.


Over on the right is where we’ll adjust the transforms and edit the design of our interaction. We can control the opacity, rotation, scale, skew and translation of the element we’re working with.


Under design, we can set the background color...adjust the opacity...create a border... contour the corners, and add a shadow effect.


To get really intricate with your design, you can set up a custom interaction for each individual element within the same container.


Ok, let’s start setting up our own hover interactions. The first thing we want to do is make the stage name and show times only appear on hover.


To do that we need to make them disappear from the initial state. Notice that the design options are missing here. That’s because elements in their initial state will automatically appear as they’re designed on the canvas.


We could just set the opacity to 0%, but let’s make things a bit more interesting and add some movement.


Adjusting the translation will reposition elements in horizontal and/or vertical directions. To move the stage name to the left of the frame, we’ll set the X-axis to -600px.


From the timing panel, we’ll set the duration of the transition to 0.3 seconds...and set the Easing to Ease in and out for a gradual flow. To see what we’ve got so far, pay attention to the textbox on the left when we click play.


That’s looking good, so let’s do the same thing for the show times on the right.


Making sure we’re still in the initial state, let’s set the translation on the X-axis to 600px this time.


We’ll head back to the timing panel to set the duration to 0.3 seconds and keep the Easing type the same.


Now while this bright pink gradient behind every item is beautifully designed, it can be a bit overwhelming to look at all at once. So let’s reveal it only on hover as well.


The gradient image is just another child element in the same parent container, so we’ll use the Layers panel to select it.


Again, we need to make it disappear on the Initial state...so this time we’ll set the opacity to 0%.

Remember how we set the interaction duration for those two text boxes to 0.3 seconds? We want the gradient image to appear before then, so let’s set the duration of this interaction to 0.1 seconds.

Let’s take a look...great!


We could go even one step further and change the text color on hover to really make it pop.

So let’s select the main text, and this time we gotta make sure we’re customizing the interaction in the Hover state.


Under design, we’ll change the text color to white and make it italic for that extra touch. This will give it a nice contrast against the bold background.


In terms of timing, we want this interaction to appear immediately, so let’s set the duration to 0 seconds.


Let’s preview our interactions one last time to see the final result.


They also look great as on tap interactions on tablet and mobile breakpoints.


We mentioned earlier that you can design different interactions for every breakpoint. In this next section, we’ll customize our interaction for every screen size, and create a fun way to show off the locations of our past music festivals.


Let’s begin with Sao Paulo and select the parent container.


Unlike our last section, we’re not going to be moving the text out of the frame completely. So first, let’s use the Inspector panel to set the overflow content to Hide so that you don’t see the text spilling over the container.


Now let’s get right back into our hover interaction flow.


To clean up the design a little, we’ll make the location text only appear on hover. Similar to our last section, this means we’ll need to make the text disappear in the Initial state.


This time we’ll make the text pop up from the bottom, so let's set it to translate 100px on the Y-axis.

Next, we’ll use the timing panel to set the duration to 0.2 seconds and keep the Easing type as Ease in and out.


Now we’ll select the year, and staying in the Initial state, we’ll set it to translate a bit lower at 200px on the Y-axis and set the duration to 0.3 seconds.


Now that we’ve hidden the text on the initial state, it doesn’t make sense to have this hyperlinked arrow here anymore. So let’s select it, and making sure we’re in the Initial state, we’ll set the opacity to 0%.

We could add some more movement to this arrow on hover, so let’s select the hover state and set the rotation to 360 degrees. We’ll set the duration to 0.3 seconds too so that it appears at the same time as the year.


There’s one more element here we need to add an interaction to. We’ll use the blue breadcrumbs to select the parent container of this vector art with a pink background.


To make the pink background disappear on Hover, we’ll use the design menu to set the background color opacity to 0%.


Note that we’re adjusting the design rather than the opacity for the entire container since we still want that star to appear.


We’ll just set this duration to 0 seconds so it appears immediately.


It’s time to add some movement to the star itself so we’ll select it from the Layers panel to get started.

Let’s add a bit of dimension and make the star a bit smaller on the initial state.


We’ll scale the X and Y to 60% of its original size.


We’ll set the duration for this interaction to 0.2 seconds and keep the same Ease type.

Excellent.


We’ll repeat the same actions for all the other locations.


Some of you may have noticed that the Miami location doesn’t have a hyperlinked arrow next to it—that’s because it’s our current festival and we’re already on the relevant site. Good eye!


Let’s preview our design on tablet. Remember, our interactions will automatically convert to on tap, but the design is still looking great.


On mobile, you can see our design has adapted to the smaller viewport but it seems like there’s a lot going on. Let’s tweak our interaction design on this breakpoint.


Luckily, the edits we make to our interactions follow the cascading rule, meaning changes we make on the mobile breakpoint will  not be reflected on larger breakpoints.


Let’s start with Sao Paulo again, and select the parent container from the breadcrumbs. Now we’ll go back to the Inspector panel and access the interactions tab.


So we basically need to reverse the interactions we previously added to each of these elements. In the Initial state, let’s reset the translation to 0.


We’ll do the same thing for the year.


For the arrow, we need to edit the interaction on both the initial and hover state. Let’s start with the initial state and reset opacity to 100%.


Now on Hover, we just need to reset the rotation.


We’ll repeat the same actions for the rest of the locations.


Let’s preview our final design. See how the changes we made on mobile don’t appear on tablet and desktop?


And just like that, with a little bit of creativity and hover interactions, we were able to create a dynamic web experience for every breakpoint.


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

NEXT VIDEOS

Video about how to edit the style, position and behavior of images on Editor X

Learn how to add, style, replace and position images on every site page.

Play icon
Video about how to use video tools and decorative elements on Editor X

Explore how to add and edit Transparent Videos, VideoBox and Vector Art.

Play icon
Video about how to use custom menus on Editor X

Discover how to create and manage multiple custom menus on every site.

Play icon
Video tutorial about saving and reusing designs using Masters

Learn how to make a section a Master to save & reuse your designs.

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
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
Collaboration
Arrow down icon
VIDEO LIBRARY
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.