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

[@kaushiknayaka4210]

Thank you very much

[@roylopez2768]

Amazing bro!

[@deadlock7946]

Good video sir.

[@livingwithweb]

Thank you ❤

[@AbdulMani-n5m]

Thanks

[@GTAMithanGaming]

thank you boss

[@livingwithweb]

My pleasure

[@psyinterestingfacts7227]

Thank you @living with web it's working

[@livingwithweb]

Thank you.

[@DaniTc-cj1sf]

cool man, thanks

[@livingwithweb]

Thank you ❤

[@jimkader]

Subscribed for this, very cool thank you

[@livingwithweb]

Thank you.

[@solarcircuit360]

BTW thanks for this. It works

[@livingwithweb]

Thank you

[@kayquebritoo]

yeah!

[@kawsarchy23]

Great work.

[@mdsabbirhossain5008]

thank you

[@AbdulKaium-cf7vv]

Very cool

[@livingwithweb]

Thank you.

[@kingmashle]

love you

[@livingwithweb]

Thank you.

[@followinglove777]

#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.

[@innocentboy02]

how to convert this in slider??

[@solarcircuit360]

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.

[@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

[@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.

[@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

[@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. 💌

[@SecretLadies-nz5gg]

Great work

[@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.