follow us

Elementor team member design with cool hover effect


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:

    --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 “

Hope it works for you.


Support us:

0 0 votes
Article Rating
Notify of
1 Comment
Inline Feedbacks
View all comments

[…] can also learn how to create Elementor team member with cool effect […]

Would love your thoughts, please comment.x

Login To Access Code Snippet:

Stay UpTo Date with Latest Post And news: