How to?
- Put the Icon Box widget in to the section
- Use SVG file as an icon
- Change Icon Box > Content > View option to Stack (you may select any shape you want)
- Add class to the section that contain those icon boxes
- Copy the CSS code below and paste it to preferred custom code area
<style>
/* Make stacked icon behind SVG change color when hover on the whole box */
.op-hoverbox .elementor-widget-icon-box:hover .elementor-widget-container .elementor-icon-box-wrapper .elementor-icon-box-icon .elementor-icon,
.op-hoverbox .elementor-widget-icon-box:active .elementor-widget-container .elementor-icon-box-wrapper .elementor-icon-box-icon .elementor-icon,
.op-hoverbox .elementor-widget-icon-box:focus .elementor-widget-container .elementor-icon-box-wrapper .elementor-icon-box-icon .elementor-icon {
background-color: var(--e-global-color-secondary);
}
/* Add transition to SVG when changing color */
.op-hoverbox .elementor-widget-icon-box svg g {
transition: fill 0.4s;
}
/* SVG Hover effect */
.op-hoverbox .elementor-widget-icon-box:hover svg g,
.op-hoverbox .elementor-widget-icon-box:active svg g,
.op-hoverbox .elementor-widget-icon-box:focus svg g {
fill: white;
}
</style>
Commercial Roofing Solutions in Virginia
This is the heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Additional Information
At very first version of this section was built with the Info Box widget from The Plus Add-on plugin but as we all know that we try to stay away from it, so I re-built this section by using Icon Box widget from Elementor instead and use a little touch from CSS to style SVG icon when hover
Please check at each comments on the code block above to understand why we built each CSS rules for.