Create super looking Team Member design with cool effect Elementor card design effect on hover. learn how to create pretty awesome design team members card and add effect on hover.
Before Hover
On hover
Attached is a YouTube tutorial offering step to step on how to achieve such a creative member card.
YouTube tutorial will be available soon.
Use the following CSS to add the effect:
Copy and paste the code:
selector{
--imageHeight: 180px;
--imageWidth: 50%;
--paddingTop: 45px;
}
selector .elementor-widget-image{
position: static;
height: var(--imageHeight);
}
selector img{
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 1;
}
selector:hover img{
left: calc((100% - var(--imageWidth)) / 2);
top: var(--paddingTop);
height: var(--imageHeight) !important;
width: var(--imageWidth) !important;
}
selector .elementor-widget-heading{
opacity: 0;
-webkit-transition: all 0.5s ease-in-out 0.4s;
-o-transition: all 0.5s ease-in-out 0.4s;
transition: all 0.5s ease-in-out 0.4s;
}
selector:hover .elementor-widget-heading{
opacity: 1;
}
selector .elementor-widget-social-icons{
opacity: 0;
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
selector:hover .elementor-widget-social-icons{
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}Add these CSS class for the effect to take place:
Copy and paste the CSS class without “—“:
CSS class needed; ” image “
[…] can also learn how to create Elementor team member with cool effect […]