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