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!

Comments

7 Responses

  1. Thanks for the code, this works fine. Icon also changes color upon hovering anywhere on the icon box. UNFORTUNATELY, when you upload your own "elementor friendly svg", the svg icon does NOT change color with the said code. Can you please help resolve this as I would like to use a custom svg. I have already tried using a "cleaned svg icon". Happy new year though 🙂

    1. Try with this code!

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

      .hoverbox .elementor-icon{
      transition: all .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;
      fill: #000!important; /* for uploaded SVG icon */
      }

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

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

    2. Maxime Desrosiers Thanks for your help ! Although, the code for an uploaded SVG didn't work for me as well. Any other advice on how the icon change colour? Also, for mobile responsive version is it possible to have different coloured icon/ title ? Thanks in advance

    3. Leah Bugeja try changing

      .hoverbox:hover .elementor-icon{
      color: #4f4f4f;
      fill: #000!important; /* for uploaded SVG icon */
      }

      to

      .hoverbox:hover .elementor-icon svg{
      color: #4f4f4f;
      fill: #000 !important;
      stroke: #000 !important;
      }

    4. Leah Bugeja Yes, it would be possible to have different colors for mobile. You would need to use CSS media queries like this :

      @media (max-width:767px){

      .hoverbox .elementor-icon svg{
      color: #4f4f4f;
      fill: #000!important; /* for uploaded SVG icon */
      }

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

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

      }

Leave a Reply