Services hover carousel

PRO

A horizontal card carousel with hover-driven image zoom, title underline reveal, and background colour transitions. Smooth arrow navigation for showcasing services, features, or products.

Copy

Unlock with Pro

Released

1 month ago

Category

Custom code

CSS

Built with

Need help?

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.

/*image background styles*/
.container .image {
    background-size: 140% !important;
        transition: all 0.3s ease-in-out; 
}
.container:hover .image {
    background-size: 130% !important;
}

/*heading styles*/
.container .heading h4 {
    text-decoration: none !important;
}
.container:hover .heading h4 {
    text-decoration: underline !important;
}

@media only screen and (min-width: 767px) and (max-width: 1024px) {
/*image background styles*/
    .container .image {
        background-size: 140% !important;
    }
    .container:hover .image {
        background-size: 130% !important;
    }
}

@media only screen and (max-width: 767px) {
/*image background styles*/
    .container .image {
        background-size: 140% !important;
    }
    .container:hover .image {
        background-size: 130% !important;
    }
}