Services cards hover

PRO

Four-column service layout with smooth image zoom on hover and an animated button arrow.

Copy

Unlock with Pro

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.

@media (min-width: 1025px) {

.service-card .icon {
    transition: transform 0.3s ease-in-out;
}

.service-card:hover .icon {
    transform: translateX(4px);
}

.service-card .image {
    position: relative;
    overflow: hidden !important;
}

.service-card .image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover !important;
    background-position: center center !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    transform: scale(1);
}

.service-card:hover .image::before {
    transform: scale(1.08);
}

}