Element UI is best viewed on desktop
An interactive card layout where hovering expands one card and contracts the rest. Hidden content smoothly appears – ideal for showcasing projects or services.
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 expand card on hover*/
@media screen and (min-width: 1024px) {
.card {
transition: all 0.9s ease-in-out;
flex: 1;
}
.card:hover {
flex: 1.5;
}
.card:hover ~ .card,
.card:not(:hover) {
flex: 0.75;
}
.text,
.categories {
opacity: 0;
visibility: hidden;
height: 0;
overflow: hidden;
transition: all 0.9s ease-in-out;
}
.card:hover .categories {
opacity: 1;
visibility: visible;
height: 50px;
transition: all 0.9s ease-in-out;
}
/* Increase height below if your text content is longer */
.card:hover .text {
opacity: 1;
visibility: visible;
height: 50px;
transition: all 0.9s ease-in-out;
}
.button {
transition: background-color 0.9s ease-in-out;
}
.card:hover .button {
background-color: white;
}
.card:hover .button .button-label p {
color: #333333 !important;
transition: color 0.9s ease-in-out;
}
.card:hover .button .icon svg {
fill: #333333 !important;
transition: fill 0.9s ease-in-out;
}
}