CMS Components

Service selector

PRO

Turn a numbered service list into an interactive experience. On hover, numbers fade out, icons fade in, and headings slide across with a colour change — all smooth, all CSS.

Copy

Unlock with Pro

Category

Code, Cursor & hover, Navigation

Built with

Widgets

Container, Heading, Text editor, Icon

Need help?

Custom code

CSS

How it works

Each .service row shows a number by default
On hover, the number fades out and an icon fades in
The heading shifts right and changes colour
Desktop/tablet only — no hover effects on mobile

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.

/*Element UI number to icon swap on hover*/
@media (min-width: 768px) {

    .service {
        display: flex;
        align-items: center;
    }

    .service .indicator {
        width: 34px;
        flex: 0 0 34px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .service .icon,
    .service .number {
        transition: opacity 0.45s ease, transform 0.45s ease;
        will-change: opacity, transform;
    }

    .service .icon {
        opacity: 0;
        transform: scale(0.92);
        pointer-events: none;
    }

    .service .number {
        opacity: 1;
        transform: scale(1);
    }

    .service .heading h3 {
        transition: transform 0.55s ease, color 0.55s ease;
        will-change: transform;
    }

    .service:hover .icon {
        opacity: 1;
        transform: scale(1);
    }

    .service:hover .number {
        opacity: 0;
        transform: scale(0.92);
    }

    /* Change colour below to match your brand */
    .service:hover .heading h3 {
        font-weight: 600 !important;
        color: #4253FF !important;
        transform: translateX(8px);
    }
}