Get Ready Elementor Templates

Elementor Blur ZOOM Hover Effect | Elementor Pro Tutorial

Subscribe To My YouTube Channel For More Upcoming Videos

Blur Zoom Hover Effect

/*Blur Zoom Hover Effect*/
selector{
    --zoom-in: 1.2;
    --zoom-out: 0.9;
    --hover-background: #8A00D4;
}
selector{
    transition: all .5;
}
selector:hover .card-box{
    filter: blur(5px);
    transform: scale(var(--zoom-out));
}
.card-box{
    transform: scale(1);
    transition: all .5s;
}
.card-box:hover{
    transform: scale(var(--zoom-in)) !important;
    z-index: 2;
    filter: blur(0px) !important;
}
selector .elementor-widget-wrap{
    transition: all .5s;
}
selector .card-box:hover .elementor-widget-wrap{
    background: var(--hover-background) !important;
}
Wanna join my secret winners’ gang?

I only share these secrets with the people in this group. Honestly, you can not find such tricks for FREE on the whole internet!

  • Money Making Blog Tricks
  • $100k by Freelancing Formula
  • Secret Resources
  • Rich Dad business tactics
  • And, of course about my upcoming videos and plans