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.
Category
Built with
Widgets
Custom code
CSS
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;
}
}