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); }