Service grid with icon hover

PRO

A four-column grid for showcasing services, features or categories. Each card includes an icon button that rotates on hover, adding subtle motion that signals it's clickable.

It works beyond service pages too: portfolio grids, category selectors, team overviews or pricing tiers. Swap the icon, match the accent colour to any brand, and it instantly takes your website to the next level.

Copy

Unlock with Pro

Released

1 week ago

Category

Code, Cursor & hover

Built with

Widgets

Container, Heading, Text editor, Icon

Need help?

Custom code

CSS

Custom css

The CSS to make the animation for this power up is included in the top level parent container Advanced > Custom CSS. No additional setup needed. Just copy the component and the styles come with it.

/* Base rotation state */
.arrow-icon {
transform: rotate(0deg);
transition: all 0.3s ease-in-out;
}

/* Hover effect */
.card:hover .arrow {
background-color: #4B77FF !important;
}

.card:hover .arrow .arrow-icon {
transform: rotate(-135deg);
}