Elementor Hover Icon Box Changes Whole Styling!

Table of Contents

Let's learn how to change the entire styling of an Elementor icon box, 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. Good practice for your CSS!

To begin with, give your Elementor icon box a class name

Under Advanced > CSS Classes.

Elementor Hover Icon Box Changes Whole Styling! 1

I named mine 'hoverbox'. You can use the same, so the CSS below will work as is.

Then, add this CSS to your page

Use this CSS code to move the tab titles below the tab content.

Elementor free users, see how to add custom CSS with Elementor free article.

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

.hoverbox .elementor-icon{
            transition: color .9s cubic-bezier(0.19, 1, 0.22, 1);
}
.hoverbox .elementor-icon-box-title{
         transition: color .9s cubic-bezier(0.19, 1, 0.22, 1);
}

.hoverbox .elementor-icon-box-description{
         transition: color .9s cubic-bezier(0.19, 1, 0.22, 1);
}
.hoverbox:hover {
    transform: scale(1.1);
}

.hoverbox:hover .elementor-icon{
        color: #4f4f4f;
}

.hoverbox:hover .elementor-icon-box-title{
    color: #4f4f4f;
}

.hoverbox:hover .elementor-icon-box-description{
     color: #4f4f4f;
}

And, if you want the same color on hover for everything, as well as the same transition settings, you can write the CSS in this optimal way:

.hoverbox{
    transition: transform .9s cubic-bezier(0.19, 1, 0.22, 1);
}
.hoverbox .elementor-icon, .hoverbox .elementor-icon-box-title, .hoverbox .elementor-icon-box-description{
            transition: color .9s cubic-bezier(0.19, 1, 0.22, 1);
}

.hoverbox:hover {
    transform: scale(1.1);
}

.hoverbox:hover .elementor-icon, .hoverbox:hover .elementor-icon-box-title, .hoverbox:hover .elementor-icon-box-description{
        color: #4f4f4f;
}

Finally, adjust to get the right styling for your hovered Elementor icon box

Watch the video to get a good idea on how to edit the code!

Let me know if everything works for you!

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments