Free Elementor ZOOM & BLUR Hover Effect | Free Elementor Tricks | WordPress Elementor Tutorial 2023

In this video, I show how to add hover zoom and zoom out effects by using WordPress free elementor.
I use here all free resources.
1. WordPress ---------- wordpress.org/
2. Elementor free --- elementor.com/...
3. Custom code ----- drive.google.c...
If you need any help feel free to comment.
Thank you.

[@AbdulMani-n5m]

Thanks

[@roylopez2768]

Amazing bro!

[@GTAMithanGaming]

thank you boss

[@livingwithweb]

My pleasure

[@deadlock7946]

Good video sir.

[@livingwithweb]

Thank you ❤

[@kawsarchy23]

Great work.

[@solarpower-sp]

BTW thanks for this. It works

[@livingwithweb]

Thank you

[@DaniTc-cj1sf]

cool man, thanks

[@livingwithweb]

Thank you ❤

[@mdsabbirhossain5008]

thank you

[@AbdulKaium-cf7vv]

Very cool

[@livingwithweb]

Thank you.

[@psyinterestingfacts7227]

Thank you @living with web it's working

[@livingwithweb]

Thank you.

[@jimkader]

Subscribed for this, very cool thank you

[@livingwithweb]

Thank you.

[@kayquebritoo]

yeah!

[@Rameezbaa]

love you

[@livingwithweb]

Thank you.

[@followinglove666]

#livingwithweb Sir I do the same thing as you told in video, but when I hover the section the colour did not change of the section and also the zoom effect not working, but the only blur effect works, please help me to resolve this issue, I look forward to your positive response. Thank you.

[@livingwithweb]

Have you used all IDs and class names the same way I did?
If yes then make a video and send the video link to my email address ( [e-mail] )
Thank you.

[@solarpower-sp]

how do I apply the zoom while removing the blur effect

[@livingwithweb]

I hope you get it.
If need more help feel free to comment.

[@lalainecatangue7179]

I tried it and the hover effects worked but it's delayed and gltching, any idea why?

[@livingwithweb]

give the correct class name.
If you are not using the correct class name then it will happen.

[@Shanglishi-Pump]

I pasted the code into CSS but nothing effects came... I don't know why

[@livingwithweb]

Please add the same class to that section. ( You did not add a class name that's why it's happened. )

[@Shanglishi-Pump]

Thanks for reminding. Will try it again.@@livingwithweb

[@tsuki3404]

/*Blur Zoom Hover Effect*/
.main-sections{
--zoom-in: 1.2;
--zoom-out: 0.9;
--hover-background: #792C1A;
}
.main-sections{
transition: all .5;
}
.main-sections: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;
}
.main-sections .elementor-widget-wrap{
transition: all .5s;
}
.main-sections .card-box:hover .elementor-widget-wrap{
background: var(--hover-background) !important;
}

[@livingwithweb]

Great work. 💌

[@islamicvibes571]

code is not working

[@livingwithweb]

make all class names the same. If it's not working send me an email with a screen record.
Here is the JSON file: drive.google.com/file/d/1OQL_J8Tz2SVV7a5NoPOBLKGrkmS6jKmb/view?usp=sharing
You can upload this file and check how I made it

[@avigarg7859]

all the logic that you mentioned in caption of video is simply done by the code. what have you done in that? disliking the video although the concept is cool. feels like I wasted time watching , I initially thought you will make hover effect in elementor. No offence.