Make this Cool Card Hover Effect with Background Image in Elementor

 

 

Code Snippet for Card Hover Effect:

<style>
.mdw-image-numbers{
    --hover-text-color: #ffffff;
    --seperator-color: #1e1b1766;
}
.mdw-image-numbers .e-con .elementor-heading-title,
.hover-effect-11 .e-container .elementor-heading-title{
   transition: 0.3s ease;
}
.mdw-image-numbers .e-con:hover .elementor-heading-title,
.mdw-image-numbers .e-container:hover .elementor-heading-title{
    color: var(--hover-text-color);
}
.mdw-image-numbers .elementor-widget-divider .elementor-widget-container{
    background: rgb(249,249,249);
    background: linear-gradient(180deg, rgba(249,249,249,0) 0%, var(--seperator-color) 50%, rgba(249,249,249,0) 100%);
}

@media (max-width: 1024px){
.mdw-image-numbers > .e-con:nth-child(2n) .elementor-widget-divider,
.mdw-image-numbers > .e-container:nth-child(2n) .elementor-widget-divider,
.mdw-image-numbers > .e-con-inner > .e-con:nth-child(2n) .elementor-widget-divider,
.mdw-image-numbers > .e-con-inner > .e-container:nth-child(2n) .elementor-widget-divider
{
    visibility: hidden;
}
}

@media (max-width: 767px){
.mdw-image-numbers .elementor-widget-divider{
    width: 100% !important;
    height: 1px;
}
.mdw-image-numbers > .e-con:nth-child(2n) .elementor-widget-divider,
.mdw-image-numbers > .e-container:nth-child(2n) .elementor-widget-divider,
.mdw-image-numbers > .e-con-inner > .e-con:nth-child(2n) .elementor-widget-divider,
.mdw-image-numbers > .e-con-inner > .e-container:nth-child(2n) .elementor-widget-divider
{
    visibility: visible;
}
.mdw-image-numbers .elementor-widget-divider .elementor-widget-container{
    background: rgb(249,249,249);
    background: linear-gradient(90deg, rgba(249,249,249,0) 0%, var(--seperator-color) 50%, rgba(249,249,249,0) 100%);
}
}
</style>