Team showcase

PRO

Hover over a team card to smoothly reveal a bio or description underneath. Text fades in and rises into place — a clean way to show more detail without cluttering your layout.

Copy

Unlock with Pro

Released

4 months 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.

/*Element UI text reveal on hover*/
@media (min-width: 1024px) {
    .card .info .bio {
        overflow: hidden;
        opacity: 0;
        max-height: 0;
        /* Optional: adds a rise transition */
        transform: translateY(10px);
        transition:
            max-height 1.5s cubic-bezier(.2, .8, .2, 1),
            opacity 1.5s cubic-bezier(.2, .8, .2, 1) 220ms,
            transform 3s cubic-bezier(.2, .8, .2, 1);
    }

    .card:hover .info .bio {
        max-height: 240px;
        opacity: 1;
        transform: translateY(0);
    }
}