Elementor team member design with cool hover effect

advert

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;
}