How to Create a Transition Effect on Hover using Elementor

A few months ago, I came across a really cool looking intro using Elementor. It was a transition effect on hover. After trying it out, I knew that it would be great to use in my blog. Unfortunately, the author had not included the code anywhere in the article. So I decided to create a similar effect and share it with you all!

In this tutorial, I'll walk you through how to create a transition effect on hover using Elementor.

Elementor is an easy-to-use drag and drop page builder for WordPress. With it, you can easily create beautiful websites with stunning layouts and feature-rich features.

It's available on all major browsers, so it will work great wherever you are. It's also fully responsive to ensure your website looks great no matter what kind of device the viewer is on.

In this post, I'll cover how to create a transition effect on hover using custom css option in Elementor and show you how its some really cool looking feature!

Transition Effect on Hover using Elementor

Step 1: First, we'll create install elementor if not installed already.

Step 2: After installing and activating elementor, navigate to your page where you want to add that effect. This is the page where we'll apply my hover effect to.

Step 3: Now click with Edit with Elementor option.

Step 4: Navigate to the section which you need to add the effect.

Step 5: Add a title widget if not present already to the section.

Step 6: Now in the Content field, add your content, before and after the text add a div class to it. For example, I have added a div class "intro-gen" before and after my text.

Step 7: Now in the Style tab, click on the Text color and set the color and font style.

Step 8: In the Advanced section, navigate to the Custom CSS box at the bottom and the following CSS.

CSS Styling

Now the next step is to style the div by adding a transition effect on hover.

  .intro-gen::before {       transform: scaleX(0);     transform-origin: bottom right;    }    .intro-gen:hover::before {     transform: scaleX(1);     transform-origin: bottom left;    }    .intro-gen::before {     content: " ";     display: block;     position: absolute;     top: 0; right: 0; bottom: 0; left: 0;     inset: 0 0 0 0;     background: hsl(200 100% 80%);     z-index: -1;     transition: transform .3s ease;    }    .intro-gen {     position: relative;     font-size: 5rem;    }

Which results in a nice transition effect on hover!

This is how it looks.

Now when you add the above CSS to the custom css box, you will have a transitioned div with text on hover inside Elementor.

The same technique can be used in any page builder plugin to add some really cool effects.

Why use Transition Effects on Hover on Texts?

First, it's really cool looking and adds a nice effect to your design.

Its also fun to use this effect even when you know that the text does not show or hide in any way. There are many different transition effects on hover which you can experiment with!

The last reason why I would recommend using transition effects on hover is so you don't have to use any javascript at all!

Final Thoughts

Elementor is great for quick website development. It's an awesome page builder that helps you create beautiful websites without any coding.

So what are your thoughts about this tutorial? Did it work out well for you?

 If you found the post useful, feel free to share it on social media using the social media buttons below.

Let me know your thoughts in the comments below!