Element UI is best viewed on desktop
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.
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);
}
}