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

  Рет қаралды 22,540

Living With Web

Living With Web

Күн бұрын

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.

Пікірлер: 38
@roylopez2768
@roylopez2768 3 ай бұрын
Amazing bro!
@kaushiknayaka4210
@kaushiknayaka4210 10 күн бұрын
Thank you very much
@deadlock7946
@deadlock7946 Жыл бұрын
Good video sir.
@livingwithweb
@livingwithweb Жыл бұрын
Thank you ❤
@DaniTc-cj1sf
@DaniTc-cj1sf 8 ай бұрын
cool man, thanks
@livingwithweb
@livingwithweb 8 ай бұрын
Thank you ❤
@AbdulMani-n5m
@AbdulMani-n5m 3 ай бұрын
Thanks
@kawsarchy23
@kawsarchy23 Жыл бұрын
Great work.
@kayquebritoo
@kayquebritoo 10 ай бұрын
yeah!
@AbdulKaium-cf7vv
@AbdulKaium-cf7vv Жыл бұрын
Very cool
@livingwithweb
@livingwithweb Жыл бұрын
Thank you.
@solarcircuit360
@solarcircuit360 Жыл бұрын
BTW thanks for this. It works
@livingwithweb
@livingwithweb Жыл бұрын
Thank you
@jimkader
@jimkader Жыл бұрын
Subscribed for this, very cool thank you
@livingwithweb
@livingwithweb Жыл бұрын
Thank you.
@GTAMithanGaming
@GTAMithanGaming 2 ай бұрын
thank you boss
@livingwithweb
@livingwithweb 2 ай бұрын
My pleasure
@mdsabbirhossain5008
@mdsabbirhossain5008 4 ай бұрын
thank you
@kingmashle
@kingmashle Жыл бұрын
love you
@livingwithweb
@livingwithweb Жыл бұрын
Thank you.
@followinglove777
@followinglove777 2 ай бұрын
#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
@livingwithweb 2 ай бұрын
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 ( livingwithweb4@gmail.com ) Thank you.
@innocentboy02
@innocentboy02 12 күн бұрын
how to convert this in slider??
@solarcircuit360
@solarcircuit360 Жыл бұрын
how do I apply the zoom while removing the blur effect
@livingwithweb
@livingwithweb Жыл бұрын
I hope you get it. If need more help feel free to comment.
@Shanglishi-Pump
@Shanglishi-Pump 10 ай бұрын
I pasted the code into CSS but nothing effects came... I don't know why
@livingwithweb
@livingwithweb 10 ай бұрын
Please add the same class to that section. ( You did not add a class name that's why it's happened. )
@Shanglishi-Pump
@Shanglishi-Pump 10 ай бұрын
Thanks for reminding. Will try it again.@@livingwithweb
@psyinterestingfacts7227
@psyinterestingfacts7227 6 ай бұрын
Thank you @living with web it's working
@livingwithweb
@livingwithweb 5 ай бұрын
Thank you.
@lalainecatangue7179
@lalainecatangue7179 Жыл бұрын
I tried it and the hover effects worked but it's delayed and gltching, any idea why?
@livingwithweb
@livingwithweb Жыл бұрын
give the correct class name. If you are not using the correct class name then it will happen.
@tsuki3404
@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
@livingwithweb Жыл бұрын
Great work. 💌
@SecretLadies-nz5gg
@SecretLadies-nz5gg Ай бұрын
Great work
@islamicvibes571
@islamicvibes571 Жыл бұрын
code is not working
@livingwithweb
@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
@avigarg7859 7 ай бұрын
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.
Animated Particles Effect in Elementor (No Plugin)
15:26
Jim Fahad Digital
Рет қаралды 117 М.
А я думаю что за звук такой знакомый? 😂😂😂
00:15
Денис Кукояка
Рет қаралды 6 МЛН
Мясо вегана? 🧐 @Whatthefshow
01:01
История одного вокалиста
Рет қаралды 7 МЛН
Chain Game Strong ⛓️
00:21
Anwar Jibawi
Рет қаралды 21 МЛН
Why Beautiful Websites Don’t Convert
12:57
Malewicz
Рет қаралды 233 М.
New Elementor Design Trick - Glowing Cursor on Card Hover
17:16
Jeffrey @ Lytbox
Рет қаралды 80 М.
Elementor - Reveal Images on Text Hover for Free
13:00
Web Squadron
Рет қаралды 12 М.
PLAY VIDEO ON SCROLL - GSAP Scrolltrigger Elementor (No plugin)
5:54
Nicolai Palmkvist
Рет қаралды 335 М.
А я думаю что за звук такой знакомый? 😂😂😂
00:15
Денис Кукояка
Рет қаралды 6 МЛН