Elementor Magic Card Hover Effect | WordPress Elementor Pro Tutorial

Elementor Magic Card Hover Effect | WordPress Elementor Pro Tutorial | Elementor Tricks

Рет қаралды 134,430

Күн бұрын

In this tutorial, I'll show you How to create Magic Card Hover Effect using Elementor Page Builder 🔥🔥No additional plugin is required!! 🔥
✅ Get Elementor PRO:
jimfahaddigital.com/e-pro
✅ Get Tutorial Code Snippets:
jimfahaddigital.com/tutorial/...
✅ Get Domain & Webhosting(50% off):
jimfahaddigital.com/hosting
Subscribe Here: bit.ly/JFDtutorials
TIMESTAMP:
0:00:00 Overview
0:00:23 Design the Layout using Elementor
0:03:18 Adding Magic Card Hover Effect
0:07:40 Contact Jim Fahad
In this tutorial, I've used a very new CSS feature. (It's @property). It gives you superpowers. No joke, there is stuff that @property can do that unlocks things in CSS we’ve never been able to do before.
As it currently stands at the time of this tutorial being published, @property is supported in Chrome and, by extension, Edge. We need to keep an eye on browser support( caniuse.com/mdn-css_at-rules_... ) for when we get to use this in other places, like Firefox and Safari. It should work on each browser after a few browser updates! You've learned something from the future! ;)
Thanks for Watching!
✅ Become a WordPress Freelancer Today! Watch this Tutorial:
• Elementor Experts Netw...
✅ Hire a Pro Web Developer:
jimfahaddigital.com
-----------------------------------------------------------------------------
And, Here are other Full Website Creation Tutorials using ELEMENTOR+WORDPRESS:
Elementor Portfolio Tutorial 2021:
• How to Make a PERSONAL...
Elementor Pro Complete Tutorial 2020:
• Elementor Pro Tutorial...
How To Create a Modern Website 2020:
• [No Coding] How to Mak...
How To Make a Business Website 2020:
• [Complete Tutorial] Ho...
How To Build a Personal Portfolio Website 2020:
• [A-Z] How to Create a ...
How To Create a One Page Wordpress Website 2020:
• How to Make a Complete...
How To Create a Multi-Page Wordpress Website 2020:
• How to make a $5000 Wo...
How To Create App Landing Wordpress Website 2020:
• How to Make a WordPres...
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
About:
8 Million+ website owners started using the Elementor page builder. I'll show you the easiest way how you can create your personal resume website using Elementor Page Builder yourself.
#WordPress #Elementor #tipsAndTricks
If you're searching for how to make an eCommerce website, how to make a professional webShop from scratch, how to create an Online Store website step by step using woocommerce elementor, woocommerce subscriptions, WordPress eCommerce 2020 tutorial for beginners, woocommerce plugins, woocommerce payment gateway, best website making course, Elementor tutorial for beginners - then this tutorial is for you.
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
Like me on Facebook:
/ jimfahad.consultancy
And, lastly, If you want me to build your AWESOME website at an affordable price,
✅ You Can Contact me through my website:
jimfahaddigital.com/request-a...
Have a great day!

Пікірлер: 209

@jimfahaddigital Жыл бұрын

🔥Download Exclusive Elementor Templates: kitpapa.com 🔥

@000SilaS000 Жыл бұрын

the tutorial is fake

@muhittintandogan656 Жыл бұрын

no tecnichal support

@vaibhavtomar980 8 ай бұрын

hi jim i loved your tutorial but i am have some issue please can you help me out to solve it when i hover on the card the motion effect is working but in a square form not like you showed i have complete this by today can u please help me out

@NOALNOM 2 жыл бұрын

This is AWESOME Jim!!! You rock! Thank your for your time!!!

@hannah_seeley Жыл бұрын

I have never commented on a KZfaq video before but I feel I must share- I have only recently started using Elementor (and Wordpress!) and your content is BY FAR the best resource I've had through my learning! Your channel's videos are easy to follow along with, and I greatly appreciate that you explain your code snippets. Wish I could do more to support- I don't know where I'd be without this KZfaq channel!

@Donny2801 2 жыл бұрын

why is this channel doesnt have 100k subs. keep up the good content bro you are the one who introduce me to freelance world of web creating and make me confident enough to start

@salauddinalim3225 2 жыл бұрын

lovely sis..........we want more like that! your convince ability just wow!:)

@asela_kasthuriarachchi 2 жыл бұрын

Thank you so much for this amzing tutorial. Love this !

@eu_testei 2 жыл бұрын

Esse é o melhor canal de Elementor do mundo!!!!! - "This is the best Elementor channel in the world!"

@LoveAllah502 2 жыл бұрын

Great .... your videos are seriously very creative and I have tried them ...... you create very informative , creative videos and yes subscribed.....

@abidchaudhary3439 2 жыл бұрын

that was awesome. I am using this in my new website. Thank you so much bro

@jbfeliz2945 2 жыл бұрын

This is ridiculously good! Many thanks

@DudiKroyzer 2 ай бұрын

Excellent tutorial♥ Thanks

@MarioSamuelCamacho Жыл бұрын

Thank you! It looks great 🙂

@healthadvisor6969 2 жыл бұрын

Very very awesome and useful video thanks for making this tutorial ❤️

@tavocarf 2 жыл бұрын

Fantastico Muchas Gracias. Voy a comenzar a seguirlos son geniales.

@ivan.arenas 2 жыл бұрын

great tutorial !! thanks a lot !

@kalashbansal2979 2 жыл бұрын

As usually your content is too much good 😊

@jimfahaddigital 2 жыл бұрын

Thanks a mill Kalash bro! 🙌

@Angad532 2 жыл бұрын

Hey Jim your content is awesome love this. Could you also do effects and components for mobile ? Would Love some awesome stuff like this for mobile !!! Cheers keep up the good work

@IAmBLOCKCHAININVESTOR 2 жыл бұрын

Amazing tutorial youre a magic rare beautiful humans, thanks for inspiration guys! cheers from Mexico

@diywebsiteguy 2 жыл бұрын

Awesome video!

@bySterling 2 жыл бұрын

So awesome!

@wa2marketingdigital 2 жыл бұрын

Excelente vídeo, GREAT! Muchas gracias

@Dr.JayPrasad7 Ай бұрын

whaooo that really incredible....

@chrisrussell7954 2 жыл бұрын

Very cool!

@dismal368 Жыл бұрын

thanks, the effect isamazing, im making my adaptation, i will update later with the link

@Jc-si6pj 2 жыл бұрын

So cool !!!

@TendenciasDigitalesIA 2 жыл бұрын

Excelente gracias por compartir el arte del diseño web

@mohdrafi7084 Жыл бұрын

Wonderful tricks

@vaibhavaggarwal2448 2 жыл бұрын

Amazing videos. I request could you please teach us & CSS? so, that we can modify the codes according to the need. Thank you for all of your videos. It helped me a lot.😊

@hurairamalik8559 2 жыл бұрын

amazing .... you're awesome

@abhishekgarg1030 2 жыл бұрын

Aah after a long time mam is back...we missed your voice mam.

@withxbro2897 2 жыл бұрын

Take lot of Love from me bro..And thanks🥰🥰🥰

@yuriykabanets7665 2 жыл бұрын

Thank You!

@searchsound3707 2 жыл бұрын

Wow Amazing 😵

@humayunkabir-hk3692 2 жыл бұрын

Very helpful

@sabbir7277 2 жыл бұрын

Really Good...

@deepemotionbd6633 2 жыл бұрын

thank you💞💞💞

@prith001 2 жыл бұрын

Awesome trick. Thanks

@jimfahaddigital 2 жыл бұрын

You're welcome!! Thanks for sharing your experience!! 😇

@YasirShabbir 2 жыл бұрын

That's amazing 😊 thank you marufa

@jimfahaddigital 2 жыл бұрын

Thanks a million brother!! Means a lot!!

@YasirShabbir 2 жыл бұрын

@@jimfahaddigital it's my pleasure ☺️

@user-mz1qn6di6r 2 жыл бұрын

Wonderful and truly amazing. Can we paste this effect inside an element (e.g. an image) instead of the inner section?

@harshalsahastrabudhe6270 2 жыл бұрын

Awesome

@aleebboy 2 жыл бұрын

Great!! thanks a lot

@jimfahaddigital 2 жыл бұрын

Thanks to you for appreciating me!!

@viveksaini9809 2 жыл бұрын

Wao great css effect thanks for this ❤️

@jimfahaddigital 2 жыл бұрын

Thank you so much Vivek brother for your appreciation!

@md.farukulislam5740 2 жыл бұрын

Great boss

@nobodyknowsme611 Жыл бұрын

you are the best

@olubayosam 2 жыл бұрын

Jim Fahad I love your contents Can you please recommend an Advanced CSS for Elementor Tutorial or Mastercourse ( I am willing to pay) So that we can also create cool advance effects like this

@ismailhb6954 2 жыл бұрын

thanks man

@memonkibaatain5402 2 жыл бұрын

And Really This Video Is Very Good For Me

@yasirmaqsood7137 Жыл бұрын

outstanding

@gourroychowdhury7667 10 ай бұрын

super

@HardRock-bq4xf 2 жыл бұрын

Hey there ! its Really amazing but when I bring it live to my website the background animation rotate out of the box only on Elmanot view work why is that ?

@pierridesign 2 жыл бұрын

THANKS

@MarkMcPhilimy Жыл бұрын

Hi, unfortunately it's not working as it should. The hover effect works but it doesn't look like yours does. The gradient hover effect looks more like a solid border. Could this have to do with using containers?

@saibabubijja3441 2 жыл бұрын

Amazing video, can we apply the effect to the fixed menu on the WordPress website?

@divyeshtanna479 6 ай бұрын

Thank You ❤

@jimfahaddigital 6 ай бұрын

You're welcome 😊

@md.sohelrana8520 2 жыл бұрын

thank you dear. from bd

@ZHARCO 10 ай бұрын

Thanks for

@kaisjrad3698 2 жыл бұрын

I surprised by the voice until I replay the video to see that is created by Marufa, Nice Tutorial , thankyou

@jimfahaddigital 2 жыл бұрын

Haha!! Thank you so much Kais brother!! 🙌😍

@khizar5217 2 жыл бұрын

Assalam o alaikum can you please tell me from where to learn html, css and JavaScript,and I really love your videos. Your channel is so underrated.

@spurkay2 Жыл бұрын

There is no setting for height in inner sections in the latest version of Elementor. How can I set the inner section height if it isn't in the layout section of the inner section settings?

@shovonmahmud9028 2 жыл бұрын

I Share my Portfolio link with friends. When they visit my page, their first reaction is "WOW". Then they ask me how I can design like that, I Credit Jim Fahad Vaiya. Now they are also your Subscriber. Also, this tutorial Is OP. Similar to Previous Magic Card Effect. But I enjoyed it.

@wmz.design 2 жыл бұрын

could you share it with me? i'd love to take a look at it and get some inspiration from it

@saiyednabeel1200 2 жыл бұрын

hi there is a problem while seeing the preview its not working as like in the editing section

@KikishaTech-do7yd Жыл бұрын

it's not giving me the border effect, its covering the entire card then it rotates

@vidaltresormba1259 2 жыл бұрын

waouh thanks you are the best

@wandersonsiqueira2468 2 жыл бұрын

What version/add-ons of Elementor are you using? I see some options in your builder I didn't see anywhere.

@muhammadhaseeb1965 Жыл бұрын

nice work but when I try this css on big section it covers all the section by its color any solution plz

@hot_fun_videos 2 жыл бұрын

hello , could u please make tutorial for create gradient for border ?

@SteveDourdil 2 жыл бұрын

It looks great in edit mode but on my live site I just see a big blue square rotating in the background?

@dodolenfantdo7194 2 жыл бұрын

same

@infinitemediaok 2 жыл бұрын

same, any solution?

2 жыл бұрын

rename the animation name, to something else, don't use "spin" because that's a default animation from css... It took me more than 3 hours to realize this ç_ç

@id104335409 2 жыл бұрын

This is working in custom CSS, but it cannot be used in additional CSS that is in the customize webpage option. It gives an error that I cannot use a mark up language in CSS. I did it to try and see if it works in free Elementor.

@niazahmad7053 2 жыл бұрын

Hi maruf and jim fahad I want to customise css but area where css used not active i using elementor pro help me to solve this problem

@DzBuZiness 2 жыл бұрын

Thanks a lot

@jimfahaddigital 2 жыл бұрын

Happy to help

@DzBuZiness 2 жыл бұрын

@@jimfahaddigital please I want to change top bar color of ocean WP theme to gradient color, can you help me?!

@saadwaheed1958 2 жыл бұрын

can we add this custom css in additional css section ???

@arifhossain-xj6zv 2 жыл бұрын

HI I am trying this tutorial in white background . when I try to see it on development mood it dose work. But when I update my work then it dose not work in customer mood . so what can i do for solved this problem please help me.

@javierdicosmo6859 2 жыл бұрын

it's possible that you do not see the effect in safari? in Chrome I don't have the problem.

@SaveThePlanetNow Жыл бұрын

my effect keeps rotating for ever behind the button, any tips?

@maheshgudipudi123 12 күн бұрын

how can u edit it in full screen mode ,when i am trying it header and footer is showing

@tarsemkumar7593 2 жыл бұрын

Magic voice 🥰🥰 how are u cute if u have this preety voice 😇😇

@jimfahaddigital 2 жыл бұрын

Thank you so much!!!

@christopherwippel2959 2 жыл бұрын

Can this be applied to a button as well?

@shikatreza6368 2 жыл бұрын

This code is not working on my site. I did exactly the same thing

@ricardogonzalesweb Жыл бұрын

Poderia fazer um vídeo de como fazer no Elementor Container .

@user-xh6se5mw8z 10 ай бұрын

great video! would really appriciate if some one here could help me out with the custom css by me the whole box has this effect and not only the border thanks in advance

@IkkaDoes Ай бұрын

its great but why my backligt rotates?

@lexx1sim 2 жыл бұрын

Хорошо

@memonkibaatain5402 2 жыл бұрын

Hello Can You Tell Me How I Made Banner Through Elemetor Kit

@konradmazur6996 7 ай бұрын

Could you show how to do it in the new elementor ? In containers.

@vedranjovanov1822 Жыл бұрын

Can it work with Elementor Containers or only Sections?

@Rojawa 2 жыл бұрын

Nice! Unfortenetly does not work on firefox

@sarminkhatun5595 2 жыл бұрын

your English is very nice

@jimfahaddigital 2 жыл бұрын

Thank you so much!!! 😍

@moondodelarte9656 2 жыл бұрын

Hey there! Thank you so much for this amazing tutorial, just a quick question, for me the effect does not work on mobile devices, is it normal? Looking forward to your answer Thanks!

@jimfahaddigital 2 жыл бұрын

In this tutorial, I've used a very new CSS feature. (It's @property). It gives you superpowers. No joke, there is stuff that @property can do that unlocks things in CSS we’ve never been able to do before. As it currently stands at the time of this tutorial being published, @property is supported in Chrome and, by extension, Edge. We need to keep an eye on browser support( caniuse.com/mdn-css_at-rules_property ) for when we get to use this in other places, like Firefox and Safari. It should work on each browser after a few browser updates! You've learned something from the future! ;) Thanks a mil!!

@LoveAllah502 2 жыл бұрын

This card effect is not showing in my Chrome browser when I open the website ...... how to fix it can anyone tell me

@ab_solution 2 жыл бұрын

Can I do it using Divi?

@massimocesiro7926 3 ай бұрын

Great tutorial, but unfortunately I can't get it to work with containers

@cathay2015 2 жыл бұрын

The effect works perfectly when I test it in the backend of WP/Elementor...BUT when I exit the backend and click on to the front end the hover effect is not there. Any ideas what might be wrong. I am using the Astra theme with elementor pro

@larryfroot 2 жыл бұрын

Browser support is good for chrome and opera. At the moment, not for Firefox or Safari. Otherwise it could be a caching issue if you are running optimisation. Hitting control and F5 at the same time time reloads the browser without its cache. It might be be a caching issue server side. In which case create a css file with the included css (I dont know how to include it via the custom css panel in Elementor so perhsps there's a tutorial out there that can help) and exclude it from all optimisation processes. Generally when something shows up in preview but not when logged out, I find to be a caching issue.

@Tap2EarnTips 2 жыл бұрын

Great video Marufa! However, I can't see the effect on mobile devices (even though i still disabled the hover effect as you've shown). And tips how to fix this?

@getsugatenchiro 7 ай бұрын

same issue

@vozaonerd 2 жыл бұрын

Hi Jim. awesome... thank you so much... but it's only working on Chrome... not in Safari and Firefox... any clue !!!!!??????? you're great !!!

@jimfahaddigital 2 жыл бұрын

@aksellsfloridarealestate Жыл бұрын

Anyway to make a tutorial for this in flex container? I can't seem to get it to work quite right in container.

@sergeisaeff4302 5 ай бұрын

The CSS code should be inserted not into the second container, but into the first one. It doesn't work in Mozilla

@mohammadalifdewan7227 2 жыл бұрын

I face some problem with custom css. I do css in elementor, it works. Then, when I delete the css, it doesn’t disappear. It still working. Why? What's the solution. Btw i use the crack version of elementor pro...

@centrumusugczyszczenia6322 2 жыл бұрын

Unfortunately, it doesn't work for me. In Elementor is ok, but with normal use, the whole window revolves around the insection field, not just the backlight. What could be the problem? Thanks a lot!

@moadel9403 2 жыл бұрын

Same thing happened to me

@larryfroot 2 жыл бұрын

Partial support from the browser?

@TherinjikongaMakkale Жыл бұрын

} selector:hover::before { width: 104%; height: 104%; border-radius: 20px; top: -2%; left: -2%; } selector:hover::after { top: 0; left: 0; right: 0; height: 100%; width: 100%; transform: scale(0.9); filter: blur(70px); } @keyframes spin { 0% { --rotate: 0deg; } 100% { --rotate: 360deg; } } Kindly use this

@jessicagarner-smith7454 10 ай бұрын

same thing happened to me. I have found that the new browser updates are not compatible with this now old tutorial :(

@ninjamedia7212 Жыл бұрын

hello do you have anything how to animate honey beee website

@jessicagarner-smith7454 10 ай бұрын

I went through the steps carefully but it does not work. When I hover over, the box just disappears. Maybe it does not work in safari browser?

@elixirian Жыл бұрын

i did exactly what you have shown but unfortunately it doesnt show as a border glowing. instead it shows like an entire square rotating behind the inner section created. please help !

@markmccavitt Жыл бұрын

Yeah i got that too, were you able to fix it?

@elixirian Жыл бұрын

@@markmccavitt no. Tried whatever way i could but that didnt work. However i got another css code which was a lot more convenient to use and that it worked very well. i guess thats more to do with the elementor version perhaps.

@durnovtsev7248 Жыл бұрын

@@elixirian I also have a square spinning, I haven't updated the elements for one year, can you send a working css code?