Elementor: How to create an animation on hover

Do you want to create a hover animation with Elementor ?

In this tutorial we will use a can of pepsi that we will fly over and which will reveal a description about it.

We invite you to check out the following video to get an idea of ​​what we want to show you.

Insert a single column section then in the sidebar select Minimum height on Height

Public chat minimum height click on VH then drag the slider to 100. Always in the tab Layout to define 650 as width.

Select the column and on the sidebar on the field Vertical Alignment select Environment.

In the tab Style, change the background color by clicking the Color picker and type # D37636 then in the section border, let's enter 20 for all curb radii.

In the tab Advanced, turn off padding binding and type 75 for internal margins Skin et Bottoms et 25 for internal margins Left-footed et Droite.

Then in the column drag a widget internal section. Let's remove one of the columns from the Internal section.

In the column of the remaining inner section, drop the Title widget and change the title to Pepsi Love.

Also read our guide on: How to Create an Effect Card from a Portfolio in Elementor

Then in the tab Style, give the text a white color and for the typography set the size on 32, row height on 1.2, letter spacing on 0.5.

Below the Title widget, drop a Text Editor widget and edit the text. In the tab Style, change the text color to white and the size typography on 16, row height on 1.5 and l'letter spacing on 0.5.

In the tab Advanced change the margin Bottoms on -10.

In the section Positioning tab Advanced, modify the Width on custom and Width Custom set the latter to 310.

Below the paragraph we will add a button widget with for Text Read more.

In the tab Style give the button the color Wheat beer and text color set it to Black.

Now select the column of the inner section, in the section Advanced tab Advanced turn off the link and click on the percentage then set the margin Left-footed on 20 and in the Internal Margin define that of Left-footed on 20.

Now drag the picture-widget above the Internal section insert an image. We have chosen for the example an image of a drink that is easily found on the web.

Once you have inserted the image, configure the Image Size on Whole and Alignment let's click on Center.

In the tab Advanced, go to the section Position on Width select Online(Auto)On Position select Absolutely and Horizontal Orientation select Right-footed then shift enter -9.9 and on the shift of the Vertical Orientation enter -105.

Go further down the Transform section define resize on 0.5.

Now select the column of the Internal section and in the tab Advanced enter the name of the css classes pepsi text.

Then select our main section, go to the section Custom CSS of his Tab Advance,  copy and paste the following code:

/*Hover Animation CSS*/
selector{
    --transition: 0.5s;
    --circle-color: #313F69;
    --content-background: #D27838;
    --mobile-height: 670px;
    --mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
    transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
    content: "";
    background: var(--circle-color);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 20px;
    clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
    clip-path: circle(400px at center);
    background: var(--content-background);
}
selector:hover .elementor-widget-image{
    right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector .pepsi-text{
    opacity: 0;
    visibility: hiddin;
}
selector:hover .pepsi-text{
    opacity: 1;
    visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
    height: var(--mobile-height);
}  
selector .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector:hover .elementor-widget-image{
    right: 68px !important;
    top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-top: -265px !important;
}
}

NOTE : If you don't have this section then you need to go to Pro version of Elementor.

Now if we want to remove the background color from the text, we will select our main column and in the Style tab deactivate the background color.

At this time, your animation will run normally on browser.

Animation on tablet also seems to be perfect

But on smartphone, it is not displayed normally. Let's solve this problem.

Let's display the browser

In the browser select the Section (make sure you are still in smartphone mode) and lower the Width on 320

Then select the main column and in its tab advanced, set all inner margins to 25

In the browser, select the image and in the tab Style, click on PX de Width and set it to 180.

In the tab Advanced du Image widget, go to Position, and select Absolutely, in horizontal offset enter 75 and vertical shift enter 236. In short, be sure to center your image in the middle of the circle using the different offsets.

You can now preview your animation on different devices.

Get Elementor Pro Now!!!

Conclusion

So ! That's it for this article that shows you how to create an animation on hover in Elementor. If you have any concerns about how to get there, we'd love to hear from you in the Comments.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...