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.
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.
<script> /* Please login to get the code * The code will be for the Elementor Hover Icon Box Changes Whole Styling! tutorial * Found at this URL https://element.how/elementor-hover-icon-box-changes-colors/ */ </script>
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:
<script> /* Please login to get the code * The code will be for the Elementor Hover Icon Box Changes Whole Styling! tutorial * Found at this URL https://element.how/elementor-hover-icon-box-changes-colors/ */ </script>
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!
11 Responses
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 🙂
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;
}
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
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;
}
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;
}
}
The code is not working for me, the only thing it does is to transform the scale of the hoverbox on hover
Maybe there is some other CSS interferring? Difficult to say without seeing the page
my title color of iconbox is not changing please help I. i have applied all the code but hover color is not changing
Yup same for me
everything is working except the color
i want the heading to change color when i hover on the column, Please is it this same process?
Hey Victor!
Yes the process is very similar. And it also very similar to this tutorial : https://element.how/elementor-hover-section-animation/
Good luck!