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 UA-cam 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 UA-cam 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
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?
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 ?
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 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
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.
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.
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!
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!!
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?
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.😊
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 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?
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 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?
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
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.
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!!
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!!
🔥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 UA-cam 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 UA-cam 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
This is AWESOME Jim!!! You rock! Thank your for your time!!!
As usually your content is too much good 😊
Thanks a mill Kalash bro! 🙌
Esse é o melhor canal de Elementor do mundo!!!!! - "This is the best Elementor channel in the world!"
lovely sis..........we want more like that! your convince ability just wow!:)
Excellent tutorial♥
Thanks
This was very helpful, Thank you!
it's not giving me the border effect, its covering the entire card then it rotates
Great .... your videos are seriously very creative and I have tried them ...... you create very informative , creative videos and yes subscribed.....
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?
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 ?
that was awesome. I am using this in my new website.
Thank you so much bro
waouh thanks you are the best
Thank you! It looks great 🙂
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 ç_ç
Fantastico Muchas Gracias. Voy a comenzar a seguirlos son geniales.
Aah after a long time mam is back...we missed your voice mam.
Thank you so much for this amzing tutorial. Love this !
Amazing tutorial youre a magic rare beautiful humans, thanks for inspiration guys! cheers from Mexico
Excelente vídeo, GREAT! Muchas gracias
This is ridiculously good! Many thanks
whaooo that really incredible....
thank you dear. from bd
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
Awesome trick. Thanks
You're welcome!! Thanks for sharing your experience!! 😇
That's amazing 😊 thank you marufa
Thanks a million brother!! Means a lot!!
@@jimfahaddigital it's my pleasure ☺️
Wonderful tricks
thanks, the effect isamazing, im making my adaptation, i will update later with the link
And Really This Video Is Very Good For Me
Wao great css effect thanks for this ❤️
Thank you so much Vivek brother for your appreciation!
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
great tutorial !! thanks a lot !
Take lot of Love from me bro..And thanks🥰🥰🥰
Very very awesome and useful video thanks for making this tutorial ❤️
Magic voice 🥰🥰 how are u cute if u have this preety voice 😇😇
Thank you so much!!!
your English is very nice
Thank you so much!!! 😍
Thank You!
thank you💞💞💞
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?
Excelente gracias por compartir el arte del diseño web
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 :(
Wow Amazing 😵
hi there is a problem while seeing the preview its not working as like in the editing section
amazing .... you're awesome
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?
thanks man
Awesome video!
Very helpful
THANKS
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!! 🙌😍
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!!
Great!! thanks a lot
Thanks to you for appreciating me!!
This code is not working on my site. I did exactly the same thing
can we add this custom css in additional css section ???
you are the best
my effect keeps rotating for ever behind the button, any tips?
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?!
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?
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.😊
So awesome!
Can it work with Elementor Containers or only Sections?
nice work but when I try this css on big section it covers all the section by its color any solution plz
Amazing video, can we apply the effect to the fixed menu on the WordPress website?
Could you show how to do it in the new elementor ? In containers.
Wonderful and truly amazing. Can we paste this effect inside an element (e.g. an image) instead of the inner section?
outstanding
its great but why my backligt rotates?
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
Does it work simple elementor ?
Really Good...
Thanks for
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?
Very cool!
Can this be applied to a button as well?
Great boss
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
Can I do it using Divi?
What version/add-ons of Elementor are you using? I see some options in your builder I didn't see anywhere.
how can u edit it in full screen mode ,when i am trying it header and footer is showing
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, but unfortunately I can't get it to work with containers
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.
your code does not work
Nice!
Unfortenetly does not work on firefox
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
@Jim Fahad Digital ভাইয়া, সবকিছুই আপনার মতো হইছে, তবে আরেকটু আস্তে আস্তে কথা বললে ভালো হতো । আপুর জন্য শুভকামনা।
Thank you so much Siam bro for your kind suggestion! I really appreciate it!! 😇
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?
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.
Hello Can You Tell Me How I Made Banner Through Elemetor Kit
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
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.
super
it's possible that you do not see the effect in safari? in Chrome I don't have the problem.
Awesome
Innersection is not available
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!!
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?
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!