Creative Team Member Card Design with Cool Hover Effect using Elementor

 

 

Code snippet for Hover Effect

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