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
I have never commented on a RUclips 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 RUclips channel!
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
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.
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?
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 ç_ç
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 ?
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!
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 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.
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!
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!!
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
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?
I followed full tutorials along CSS. But not working magical effect, only after hover is vanishing the border, thats all. Could you pls advise if you got some other comments same as me?
This does exactly the same for me, it rotates the whole box behind it so it ends up as the front box with a spinning light blue box behind it like a cartwheel. Jim your channel is awesome but some of your code does not work on the new browser updates.
I followed the exact same steps but when I add the code in the inner container's custom CSS, it glows the entire card but when I add it on the outer container it glows the edges but the width of the glowing edges is very thin...... how to fix it?
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!!
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!!
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.😊
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!!
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?
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
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.
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!!
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.
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.
🔥Download Exclusive Elementor Templates: kitpapa.com 🔥
the tutorial is fake
no tecnichal support
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
I have never commented on a RUclips 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 RUclips channel!
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
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.
could you share it with me? i'd love to take a look at it and get some inspiration from it
As usually your content is too much good 😊
Thanks a mill Kalash bro! 🙌
lovely sis..........we want more like that! your convince ability just wow!:)
This is AWESOME Jim!!! You rock! Thank your for your time!!!
Aah after a long time mam is back...we missed your voice mam.
This was very helpful, Thank you!
Esse é o melhor canal de Elementor do mundo!!!!! - "This is the best Elementor channel in the world!"
I surprised by the voice until I replay the video to see that is created by Marufa,
Nice Tutorial , thankyou
Haha!! Thank you so much Kais brother!! 🙌😍
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?
It looks great in edit mode but on my live site I just see a big blue square rotating in the background?
same
same, any solution?
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 ç_ç
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 ?
Great .... your videos are seriously very creative and I have tried them ...... you create very informative , creative videos and yes subscribed.....
that was awesome. I am using this in my new website.
Thank you so much bro
Excellent tutorial♥
Thanks
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!
Same thing happened to me
Partial support from the browser?
}
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
same thing happened to me. I have found that the new browser updates are not compatible with this now old tutorial :(
For anyone rotating out of the box use this
}
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;
}
}
Unfortunately, result is same :( Is there other way?
Amazing tutorial youre a magic rare beautiful humans, thanks for inspiration guys! cheers from Mexico
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 !
Yeah i got that too, were you able to fix it?
@@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.
@@elixirian I also have a square spinning, I haven't updated the elements for one year, can you send a working css code?
Thank you! It looks great 🙂
That's amazing 😊 thank you marufa
Thanks a million brother!! Means a lot!!
@@jimfahaddigital it's my pleasure ☺️
thanks, the effect isamazing, im making my adaptation, i will update later with the link
whaooo that really incredible....
waouh thanks you are the best
Thank you so much for this amzing tutorial. Love this !
This is ridiculously good! Many thanks
Take lot of Love from me bro..And thanks🥰🥰🥰
your English is very nice
Thank you so much!!! 😍
Wonderful tricks
Awesome video!
Awesome trick. Thanks
You're welcome!! Thanks for sharing your experience!! 😇
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!
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!!
Fantastico Muchas Gracias. Voy a comenzar a seguirlos son geniales.
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
Magic voice 🥰🥰 how are u cute if u have this preety voice 😇😇
Thank you so much!!!
Wow Amazing 😵
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?
same issue
Wao great css effect thanks for this ❤️
Thank you so much Vivek brother for your appreciation!
I followed full tutorials along CSS. But not working magical effect, only after hover is vanishing the border, thats all. Could you pls advise if you got some other comments same as me?
I am also facing the same problem.
Hi and many thanks for your precious resources. Unfortunately when I hover the color will affect the entire section rather than only the border.
same here. Have you found any solution yet?
@@TechHiveCX hi, couldn't remember exactly but at the end it worked out....
This does exactly the same for me, it rotates the whole box behind it so it ends up as the front box with a spinning light blue box behind it like a cartwheel.
Jim your channel is awesome but some of your code does not work on the new browser updates.
great tutorial !! thanks a lot !
I followed the exact same steps but when I add the code in the inner container's custom CSS, it glows the entire card but when I add it on the outer container it glows the edges but the width of the glowing edges is very thin...... how to fix it?
Excelente vídeo, GREAT! Muchas gracias
thank you dear. from bd
So awesome!
you are the best
@Jim Fahad Digital ভাইয়া, সবকিছুই আপনার মতো হইছে, তবে আরেকটু আস্তে আস্তে কথা বললে ভালো হতো । আপুর জন্য শুভকামনা।
Thank you so much Siam bro for your kind suggestion! I really appreciate it!! 😇
Thank You!
Very cool!
amazing .... you're awesome
hi there is a problem while seeing the preview its not working as like in the editing section
Hi Marufa, thanks for a great tutorial. Unfortunately, the CSS effect didn't work for me even though I followed the tutorial step by step.
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!!
@@jimfahaddigital thank you for explaining, yes it is working on Chrome, I was testing in Firefox. Thanks again!!
@@jimfahaddigital thank you Jim! this is so cool much success to you is there a place where we can donate any NFTs to you?
thanks man
And Really This Video Is Very Good For Me
it's not giving me the border effect, its covering the entire card then it rotates
outstanding
Anyway to make a tutorial for this in flex container? I can't seem to get it to work quite right in container.
The CSS code should be inserted not into the second container, but into the first one. It doesn't work in Mozilla
Very helpful
Very very awesome and useful video thanks for making this tutorial ❤️
nice work but when I try this css on big section it covers all the section by its color any solution plz
Hi Jim. awesome... thank you so much... but it's only working on Chrome... not in Safari and Firefox... any clue !!!!!??????? you're great !!!
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!!
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.😊
Could you show how to do it in the new elementor ? In containers.
Great!! thanks a lot
Thanks to you for appreciating me!!
how can u edit it in full screen mode ,when i am trying it header and footer is showing
Great boss
thank you💞💞💞
Amazing video, can we apply the effect to the fixed menu on the WordPress website?
Hello. It is working on my elementor page builder but not when I open my website. Please help me ASAP! xx
Thankyou!!*
can we add this custom css in additional css section ???
it doesn't work in safari. How can I solve this?
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!!
@@jimfahaddigital Thanks
@@jimfahaddigital Mozilla firefox not support?
Really Good...
It doesn't work with containers ?
When I hover the effect cover the elements and everything becomes blue
Were you able to fix it? I'm having the same issue
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?
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
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.
Hi, i loved the video, thanks a lot. The issue is that it doesn't works on Safari, is there anything I can do to fix that?
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!!
@@jimfahaddigital Thanks for the answer and the explanation. I really appreciate it!
Awesome
Excelente gracias por compartir el arte del diseño web
Wonderful and truly amazing. Can we paste this effect inside an element (e.g. an image) instead of the inner section?
Thanks a lot
Happy to help
@@jimfahaddigital please I want to change top bar color of ocean WP theme to gradient color, can you help me?!
Can I do it using Divi?
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
Can this be applied to a button as well?
super
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.
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.
Hey, its an awesome video but kindly give the link of that CSS code.
On the description, and please tell me if it work to you
This code is not working on my site. I did exactly the same thing
What version/add-ons of Elementor are you using? I see some options in your builder I didn't see anywhere.
its great but why my backligt rotates?
THANKS
Does it work simple elementor ?
Can it work with Elementor Containers or only Sections?
Хорошо
my effect keeps rotating for ever behind the button, any tips?
it's possible that you do not see the effect in safari? in Chrome I don't have the problem.
Great tutorial, but unfortunately I can't get it to work with containers
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.