Easy Elementor Hover Section Animation!

Table of Contents

Let's learn how to animate the whole content of an Elementor section, upon hovering any part of it!

Follow along as I find out the right CSS, and learn how to achieve the same for any Elementor element, column or section!

This tutorial is a bit different, as I go through the code and explain everything. It's a good CSS practice!

You can also download the template directly for the Elementor Hover Section Animation we will create.

To begin with, give your Elementor section a class name

Under Advanced > CSS Classes.

I named mine 'hoversection'. You can use any name you want.

Easy Elementor Hover Section Animation! 1

Then, add some CSS to get the Elementor Section Hover Animation

Watch the video to get a good idea of what CSS can be used, and how to get the right selectors.

For example, this is the CSS used to get the animation that was created in the video.

.hoversection{
    transition: background-color .9s cubic-bezier(0.19, 1, 0.22, 1);
}
.hoversection .elementor-icon{
    transition: transform .9s cubic-bezier(0.19, 1, 0.22, 1), color .9s cubic-bezier(0.19, 1, 0.22, 1);
}
.hoversection h3, .hoversection h4, .hoversection p{
        transition: transform .9s cubic-bezier(0.19, 1, 0.22, 1), color .9s cubic-bezier(0.19, 1, 0.22, 1);
}

.hoversection:hover{
    background-color: white!important;
}
.hoversection:hover .elementor-icon{
    transform: rotate(360deg) scale(1.8);
    color:black!important;
}
.hoversection:hover h3, .hoversection:hover h4, .hoversection:hover p{
    color: black!important;
}
.hoversection:hover h3, .hoversection:hover h4{
    transform: scale(1.1);
}

.arrowsIn{
    transition: transform .9s cubic-bezier(0.19, 1, 0.22, 1);
}

.hoversection:hover .arrowLeft{
    transform: translateX(-36vw);
}

.hoversection:hover .arrowRight{
    transform: translateX(36vw);
}

.hoversection h3::before {
    content:'';
    background-color: #fff;
    width:100%;
    bottom:-4px;
    height:1px;
    position:absolute;
    transition: transform 0.7s cubic-bezier(1, 0, 0, 1);
    transform: scaleX(0);
    transform-origin:right;
}

.hoversection:hover h3::before {
    background-color: #000;
    transform:scaleX(1);
    transform-origin:left;
}

In the video, you might notice some horizontal scroll bar... you can easily fix this by setting the section overflow:hidden.

Easy Elementor Hover Section Animation! 2

Finally, enjoy your Elementor Hover Animation!

Let me know if everything works for you!

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments