Goto Advanced Tab and add this css class name “hoverbox”
The CSS provided in the question can be used to change the styling of an icon box in Elementor when it is hovered over.
The first block of CSS applies a transformation and transition effect to the entire icon box when it is hovered over. The transformation scales the box up by 10%, while the transition effect smoothly transitions the change in size over a duration of 0.9 seconds, using a cubic-bezier timing function.
The next three blocks of CSS apply a transition effect to the icon, title, and description within the icon box. These elements will smoothly change color over a duration of 0.9 seconds when the icon box is hovered over.
The final three blocks of CSS define the new styling that will be applied to the icon, title, and description when the icon box is hovered over. In this case, the color of all three elements is changed to #4f4f4f (a dark grey color).
If you want to apply the same transition and hover effects to all elements within the icon box, you can use the second block of CSS provided in the question. This block combines the transitions for the icon, title, and description into a single rule, reducing the amount of code needed. The final block of CSS also combines the hover styles for the icon, title, and description into a single rule.
To use this CSS, you will need to add it to your website’s stylesheet or include it in a custom CSS plugin. Make sure to update the selectors to match the specific elements on your website. You may also want to adjust the transition and hover effects to meet your desired styling.
For more information on using CSS to style elements in Elementor, you can check out the Elementor documentation or read about CSS transitions and CSS transforms on the Mozilla Developer Network.
.elementor-icon-box-description{ transition: color .9s cubic-bezier(0.19, 1, 0.22, 1); }
Â
This tutorial teaches you how to change the styling of an Elementor icon box when it is hovered over.
First, give your Elementor icon box a class name under Advanced > CSS Classes. For this tutorial, the class name used is “hoverbox”.
Then, add the following CSS to your page:
This code will change the color of the icon, title, and description when the icon box is hovered over, as well as cause the icon box to scale up slightly.
Alternatively, you can use the following optimized CSS code to achieve the same effect:
This will apply the same transition and color change to all three elements when the icon box is hovered.
To further improve your CSS skills, consider taking the CSS Course for Elementor users. This course offers advanced tutorials and techniques for creating unique and engaging designs. If it doesn’t meet your needs, there is a one-month, no-questions-asked money-back guarantee.
