Icon Customization for Pro - Hover effect

[rubels11]

How can i achieve hover effect for icons? Image attached below

[MrTyree]

Hey @rubels11,

First I would use the the Headline element with these settings turned on to achieve the look:

Layout: Column 
Text Format: Center
Subheadline Setup: On
Text Format: Center
Graphic Setup: On
Graphic Icon Border: On

Next I’d a custom class to the headline element to set it apart in case I add the same element on the page again, for example: .perk-icon. Now I’m able to add custom CSS to make the hover animation:

.perk-icon i.x-icon.x-graphic-icon.x-graphic-primary:hover {
    border-color: red;
    color: red;
}

Let me know if this helps