Elementor Card Widget- Card Hover Effects

This video tutorial shows how to create a service cards section with nice hover effect in WordPress using the Elementor plugin.

Watch Now: https://youtu.be/L85Sgzzmm6I
Elementor Pro for Rs.249 / $2.99: https://resources.mdasik.com/product/elementor-pro/

Source Code:

 
.service-card::before {
    content: '';
    width: 51px;
    height: 51px;
    border-radius: 50%;
    background: red;
    transition: all 0.5s;
     /*opacity: 0; */
    position: absolute;
    transform: translate(33px, 38px);
}

.service-card:hover::before {
    content: '';
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transition: all 0.5s;
    opacity: 1;
    transform: translate(0, 0);
}

.service-card:hover .elementor-icon-box-description {
    color: white !important;
     transition: all 0.3s;
}
.service-card:hover .elementor-icon-box-title {
    color: white !important;
}

/*For each card container*/
selector:before{
    background: #BAABFE;
}

Class I Use in this video: service-card

Keywords:

elementor card hover effect,animated card hover effect,elementor magic card hover effect,profile card hover effect,framer card hover effect,responsive card hover effect,3d card hover effect,elementor hover effects,elementor hover effects image to text on hover,elementor tips and tricks,elementor card hover effects,elementor text over image on hover,elementor text over image hide show,wordpress elementor pro tutorial,elementor effects,elementor tips u0026 tricks