That's pretty spectacular...maybe not suitable for the mindfulness meditation website that I take care of but I'm going to play around with this anyway just for fun. Thank you!
Maaan you did a great job, one of the most beautiful tricks I´ve ever seen ❤🔥❤🔥 !! I have a quick question if you could answer please : If I want to make more than one container with multiple cards do I have to apply the java script another time or it works one time for all of them ?
@@LytboxStudio Yeah I figured it out in the meantime! I'm on Windows, it's not 100% perfect for now but a great experience that changes my usage. I need to adapt to that new experience, for now I'm keeping Chrome aside because I'm faster with it for web dev. Thansk for your reply :)
Just Amazing Jeff! I love this video and surely you've done an awesome job. Thanks a lot for sharing this wonderful tutorial with us. Much appreciate it.
That's really amazing Jeff. But there is a issue with mobile responsiveness . That is- Suppose there is three cards and just refresh the page from mobile then when you click a card for the first time then it's not showing the glowing effect just but then if i click another card then here it's working well. Please tell me about this issue i will be very greatfull to you.. Thanks Jeff...
Great video, the effect looks simply amazing! I've watched your video several times now, but unfortunately, I'm encountering an error. The effect works very well in Elementor, but when I open the website in a new private browser tab, the opacity of the cursor effect is at 100 percent, and it looks like a long circle.
Great feature. I just tried to implement it step by step. Works fine, except for that my blob is not circular, but more oval with more stretch in the vertical axis. What could that be? I think I followed along each step of your tutorial. And another question (not related to my problem): what does the fakeblob do?
@@LytboxStudio 50% all the way round for both the blob and fake-blob. Thanks for your great work, I'm just getting into your channel. Really great content on there for people starting out like me. Well-paced, great explanations and easy to understand and follow along. Subscribed!
@@LytboxStudio When I put in the CSS that the --blob-size: 500px instead of 250 px, it get's almost round. Seems to be that the height is not relative to the width. No clue.
@@LytboxStudio Okay, I tailored the solution myself. I think in your case it works out circular because 250px width and 80% height (of the container) is almost the same dimension. But if that's not the case, it will be oval, not circular. In order to avoid that, I needed to give the same attributes for selector .blob to width and height as well as left and top: width: var(--blob-size); height: var(--blob-size); left: calc(50% - calc(var(--blob-size)/2)); top: calc(50% - calc(var(--blob-size)/2));
I did all the steps one by one and it didn't work, I don't know if it's my version of Elementor, I have the newest one or the codes didn't work... :( but it's a great effect and contribution.
Love this, Im trying to use it with a loop grid but the containers after the first one do not get the effect? Is there any reason why? Would be awesome to use this on a loop grid.
Hey thanks for the tuto ! The effect is really cool. Perhaps, I have trouble getting the first card working. When I first saw the tutorial and followed it on my website everything was working really fine. And recently, I have no freakin idea why. My first card doesn't want to glow. The hover effect applied on the card work but the glowing effect doesn't want to work and I really don't know why ! I hope you can help me about it :))
It looks amazing. But how can i change size of a blob? My card is kinda long and blob looks like huge oval and i dont know how to fix it. I hope you can give me a hint!
Thank you for the tutorial, I used this effect in practice and followed every step. The effect works in the preview but not in the final URL. I am using localhost. Is there any reason for that? thanks again
I really like these tutorials. They are just excellent! Q: how would this effect work on a tablet or phone screen? I’m guessing since you can’t hover over it, this wouldn’t really work on those devices, right?
Hey thanks Jason! It wouldn’t do anything on mobile. If you have an iPad with Apple Pencil. You can see hover effects by hovering the pencil close to the screen. I’m not sure about Android tablets.
Amazing tutorial! I do this step by step but in my card I have some padding or spacing, the three containers in it are not exaclty above each other if that makes sense. I don't know why it does that and I followed everything right
Hi, thanks for the great tutorial. A question from my side: I have done this effect within my Crocoblock's Jetengine Listing, using Elementor Pro. Everything works fine when I preview the listing within the template editor. However, when I add the listing to my site page and view it on the front end, the hover effect does not seem to work.
According to Crocoblock support, it seems the issue is that the code doesn't work in a listing where multiple containers are shown. But they can't help on this as this is not related to their plugin scope. Maybe you can help in this.
Thanks so much Jeff! These videos are very inspirational, and informative. Really appreciate you for making these. Definitely going to be adding these effects to my own site🙏🏽
I have done everything step by step and this is working but it is not staying on one box, when I take the cursor to the end of the box, the hover effect starts in another box
Okay I figured the container part out, but how are you getting them so they are side by side? Mine want to be one underneath the other. Can't figure out how to make them so they are just side by side like you are showing in the video? Thanks
Dude...why? When i think, ok, let dedicate a little more time to learn tha basics, and a little bit more, you come up with these gems and get me all lighted up like the boxes 😂😂
I wish we could get your JSON file from that so we could save time. Do you think you could save this as a template and give us the download link? But Anyway, thank you for that video. :)
Nice! Feel free to share your video link, I’m sure it will help. I always like to see the different ways of creating something, it’s a great way to learn
@@LytboxStudio Unfortunately UA-cam removes comments that contain external links. It's on my youtube channel, last video from 2 weeks ago. There are also three demopages. One with a card design created with containers, similar to what you did. A second demo that works with the iconbox widget and a third demo with a loop-grid-widget. All code is on the page
I need help! The code worked. But if I duplicate the element and place it in another section of the website, it stops working in this other section and only works in the first section, in the first element created with this effect. How to fix this problem?
First off, I love this affect, however... Where the heck are you finding this feature "Container"? I have elementor pro and I'm not seeing it anywhere? AM I just blind or am I missing something? I use columns, but I've never seen containers? I started to follow along but got stuck really fast when I did not see containers or how you were editing the gap size? I went to the gaps from the main column (container), but once there the option to edit is "Layout" not container? Again, am I missing something? Thanks
Sounds like you’re using the old version with Sections and Columns. To switch to containers, go to your dashboard > Elementor settings > Features and turn on containers. But also, look up changing from sections to containers, it’s a big change in Elementor
@@LytboxStudio How do you get the containers to be side by side? I can only get them to stack on top of each other. In your video they are side by side?
@@kpviper7 you need to use the flex controls in the container widget. Going from sections to containers has a learning curve but it’s well worth it. I’d check out a few containers videos. Living with Pixels has a really good one. Basically, is your containers, in the first tab you’ll see a bunch of options, those are your flex controls. To get the content side by side loom for the option with 3 bars vertically stacked.
I mean this is super cool but like why doesnt anyone ever cover designing for mobile then scaling up to desktop. Most your audience including me love desktops but many people aka visistors don't use a desktop. Would love to see some cool mobile stuff in this category.
Good question. The thing about effects on mobile, they can work against the user experience and need to be very carefully implemented. I have some effect videos coming up and will highlight when it’s also good for mobile.
The link to the code snippets has been here, here it is - lytboxacademy.com/card-hover-effect-glowing-cursor-with-elementor/
Adding template in blog it useful
This code in not working
Man!! This is one of the best hover effects I've ever seen with Elementor.❤
This was the best Elementor tutorial I've seen. Please continue with more videos like this.
Got many more fun ones on the way!
Love your Tutorials man, this effect is beautiful.
Thanks! 🙏
From Brazil here... Amazing tutorial,man... Tks!!!It Deserved my like and my subscription...
That’s awesome! Welcome to the Lytbox crew 😎
Thank you. Learned a lot from just one post.
That’s great thanks!
it really helped me a lotttttt, thank you so so muchhh
For me it's working absolutely fine Thank you so much bro 🙏🏻😊
I love it! Thank you so much!
Thanks! 🙏
Thank you ! And keep it up!
Thanks and will do!
Thanks Jeffrey. As always, another great tutorial. Cheers Bro from the UK
Thanks! And cheers! Much appreciated
That's pretty spectacular...maybe not suitable for the mindfulness meditation website that I take care of but I'm going to play around with this anyway just for fun. Thank you!
It's all about having fun!
Maaan you did a great job, one of the most beautiful tricks I´ve ever seen ❤🔥❤🔥 !!
I have a quick question if you could answer please : If I want to make more than one container with multiple cards do I have to apply the java script another time or it works one time for all of them ?
If you dont mind sharing, what font is being used recording this video? Thanks for the amazing tutorial!
It's called Stabil Grotesk
Loved the effect, love your work can we make this effect more interesting with using gyroscope when on mobile instead of taping?
wow ... i love it, amazing.
🙏
Well done!! Can we do this in Gutenberg?
Hi! Thanks for the trick :)
Question : what do you use to have the left sidebar 14:49 that fives you access to current tabs and apps?
That's the Arc Browser. You gotta check it out, game changer!
@@LytboxStudio Yeah I figured it out in the meantime! I'm on Windows, it's not 100% perfect for now but a great experience that changes my usage. I need to adapt to that new experience, for now I'm keeping Chrome aside because I'm faster with it for web dev.
Thansk for your reply :)
Just Amazing Jeff! I love this video and surely you've done an awesome job. Thanks a lot for sharing this wonderful tutorial with us. Much appreciate it.
Thank you, I really appreciate this! 🙏
That's really amazing Jeff. But there is a issue with mobile responsiveness . That is- Suppose there is three cards and just refresh the page from mobile then when you click a card for the first time then it's not showing the glowing effect just but then if i click another card then here it's working well. Please tell me about this issue i will be very greatfull to you.. Thanks Jeff...
Thanks for reporting this. I’ll check it out and make updates to the code asap
This is dope. Thanks for sharing!
Cool man thanks! 😎
Amazing effect - Thank you!
Thanks!🙏
Very very perfect teaching. Appreciate that
Thanks! 🙏
Just rebuilt it. Thanks! Love to see more fun-stuff ;)
I'm ready to have more fun too and got more on the way. Thanks!
Super cool. We need more tutorials like this!
Great video, the effect looks simply amazing! I've watched your video several times now, but unfortunately, I'm encountering an error. The effect works very well in Elementor, but when I open the website in a new private browser tab, the opacity of the cursor effect is at 100 percent, and it looks like a long circle.
It looks awesome. Thanks for sharing!
Thanks!
Great feature. I just tried to implement it step by step. Works fine, except for that my blob is not circular, but more oval with more stretch in the vertical axis. What could that be? I think I followed along each step of your tutorial. And another question (not related to my problem): what does the fakeblob do?
Sounds like something is off with the border-radius. The fake blob acts like a mask to cover the blob.
@@LytboxStudio 50% all the way round for both the blob and fake-blob. Thanks for your great work, I'm just getting into your channel. Really great content on there for people starting out like me. Well-paced, great explanations and easy to understand and follow along. Subscribed!
@@LytboxStudio When I put in the CSS that the --blob-size: 500px instead of 250 px, it get's almost round. Seems to be that the height is not relative to the width. No clue.
@@LytboxStudio Okay, I tailored the solution myself. I think in your case it works out circular because 250px width and 80% height (of the container) is almost the same dimension. But if that's not the case, it will be oval, not circular. In order to avoid that, I needed to give the same attributes for selector .blob to width and height as well as left and top:
width: var(--blob-size);
height: var(--blob-size);
left: calc(50% - calc(var(--blob-size)/2));
top: calc(50% - calc(var(--blob-size)/2));
I did all the steps one by one and it didn't work, I don't know if it's my version of Elementor, I have the newest one or the codes didn't work... :( but it's a great effect and contribution.
Me too, everything is following the settings and it doesn't work...
This is worth gold. Best UI design for today. Thanks a ton
Love this, Im trying to use it with a loop grid but the containers after the first one do not get the effect? Is there any reason why? Would be awesome to use this on a loop grid.
Hey Jeffrey, Can you PLEASE create a tutorial for this effect on white BG?
I'm planning on an update
So cool, thank you Jeffrey!
wow love from Bangladesh💜
Much love 🇧🇩!
you are amazing. thank you for this great tutorial
love the effect thanks !
Awesome thanks!
thats a outstanding video !
Thanks!🙏
Hey thanks for the tuto ! The effect is really cool. Perhaps, I have trouble getting the first card working. When I first saw the tutorial and followed it on my website everything was working really fine. And recently, I have no freakin idea why. My first card doesn't want to glow. The hover effect applied on the card work but the glowing effect doesn't want to work and I really don't know why ! I hope you can help me about it :))
hello, what theme do you use for wordpress?
For Elementor I'll only use Hello Theme. I also use Bricks and Breakdance and those don't require themes
It looks amazing. But how can i change size of a blob? My card is kinda long and blob looks like huge oval and i dont know how to fix it. I hope you can give me a hint!
same! any solution for this? @LytboxStudio
Thank you for the tutorial, I used this effect in practice and followed every step. The effect works in the preview but not in the final URL. I am using localhost. Is there any reason for that? thanks again
Im having a similar problem
same
@@leonbrostmeyer5111
My problem was that I was already using the class name "card" for another custom css code snippet earlier in my page .
I used on final production server then it work @@leonbrostmeyer5111
Same
Wow, excellent, how could I add to a header? Greetings!!! thx!!
The same, just add to the container wrapping your header like you did the card
Thank you so much!
I really like these tutorials. They are just excellent!
Q: how would this effect work on a tablet or phone screen? I’m guessing since you can’t hover over it, this wouldn’t really work on those devices, right?
Hey thanks Jason! It wouldn’t do anything on mobile. If you have an iPad with Apple Pencil. You can see hover effects by hovering the pencil close to the screen. I’m not sure about Android tablets.
This is so cool. Thank you for this.
So good to hear!
Amazing tutorial! I do this step by step but in my card I have some padding or spacing, the three containers in it are not exaclty above each other if that makes sense. I don't know why it does that and I followed everything right
Same
Wait, I already solved it. Just go to the gaps section in each container and set it in 0, in my case it was all set in 20 by default.
Amazing! Thank you for that. New subscriber :)
This is AWESOME!!! Thank you!!!
Thanks! I really appreciate this. Cheers!
Thanks so much for sharing!!!
🙏
Really great tutorial, great pace, explanation, etc. Like and follow for sure!
Super tutorial... but when i duplicate the card the effect doesn't work on the first card. Are you know how to fix this problem ? Thanks
Nice little tutorial Jeff!
Thanks!🙏
Do you have animated border effect video? Not only on hover.
Hi, thanks for the great tutorial. A question from my side: I have done this effect within my Crocoblock's Jetengine Listing, using Elementor Pro. Everything works fine when I preview the listing within the template editor. However, when I add the listing to my site page and view it on the front end, the hover effect does not seem to work.
same...
Same
According to Crocoblock support, it seems the issue is that the code doesn't work in a listing where multiple containers are shown. But they can't help on this as this is not related to their plugin scope. Maybe you can help in this.
Thanks so much Jeff! These videos are very inspirational, and informative. Really appreciate you for making these. Definitely going to be adding these effects to my own site🙏🏽
That’s awesome! Thanks!
the effect not showing in mobile version
thanks alot, but can this be done on the free version of elementor?
pro tuto , nice tricks 🎉, thanks bro ❤.
can you make some beautiful tricks like this , in the future, for mobile devices!
thanks again
For sure! Got more a;ready lined up 😎
how can i filter this card by category in a dashboard style where the category are on the left
So this is only for upgraded? :(
Could you please explain how to make it responsive?
Do I need the pro version?
Yes you do to follow the tut but with extra development you can apply these same to the free version. But that's a whole different tut\
I have done everything step by step and this is working but it is not staying on one box, when I take the cursor to the end of the box, the hover effect starts in another box
Okay I figured the container part out, but how are you getting them so they are side by side? Mine want to be one underneath the other. Can't figure out how to make them so they are just side by side like you are showing in the video? Thanks
It’s all I. The container settings. Look for the 3 bars in the first tab.
how to make border visible? (it appears only when hovering)
Is elementor pro needed for this?
Wow... tank you !
🙏
Nice tut!
Dude...why? When i think, ok, let dedicate a little more time to learn tha basics, and a little bit more, you come up with these gems and get me all lighted up like the boxes 😂😂
Haha nice! The creativity is sparking, mission accomplished 😉
I wish we could get your JSON file from that so we could save time. Do you think you could save this as a template and give us the download link? But Anyway, thank you for that video. :)
Text is not visible on Mobile Portrait 767px
hey, if i want to add the code snippets, it tells me i have to upgrade elementor and pay. is this neccesary?
I have no idea why, but when I scroll down on the page, there is a shadow (from above) in the card as soon I get to it. Any Idea how to fix it?
Excellent
🙏
Great tutorial ❤
Thanks!
I did the same thing on my channel but use a different method and code.
Nice! Feel free to share your video link, I’m sure it will help. I always like to see the different ways of creating something, it’s a great way to learn
@@LytboxStudio
Unfortunately UA-cam removes comments that contain external links.
It's on my youtube channel, last video from 2 weeks ago.
There are also three demopages. One with a card design created with containers, similar to what you did.
A second demo that works with the iconbox widget and a third demo with a loop-grid-widget.
All code is on the page
@@franktielemans6624nice one. Just checked it out (and subbed) looks good
That's awesome! But doesn't work after today's Elementor Update(((
i dont know whats happening but the effect works only on the backend..
I did everything, step-by-step, exactly the same and for some reason its not working for me. Been trying and adjusting for hours.
you did not do everything step by step then. Make sure you added the right spellings of ids. For the css
i did too, and it the main card is not exaclty the same, and the lighting effect wasn't so subtle, but big, and i did everything step by step :(
Is this possible in Elementor Free? I really wanna use this effect for a client.
Waooow, short of words
😎
Adding template in blog it easily for work
Cool!
I need help!
The code worked. But if I duplicate the element and place it in another section of the website, it stops working in this other section and only works in the first section, in the first element created with this effect. How to fix this problem?
same thing happened with me man. someone here to help?
i just watched the whole video, its just a problem in the backend, if you publish it and look at the preview, it still works. hope that helped :)
♥♥
something goes wrong when I try to copy the Card Section into another page
Am facing a problem.. I can see the effect in elementor builder but not on the frontend of the website..
same here... :/
love bro
First off, I love this affect, however... Where the heck are you finding this feature "Container"? I have elementor pro and I'm not seeing it anywhere? AM I just blind or am I missing something? I use columns, but I've never seen containers? I started to follow along but got stuck really fast when I did not see containers or how you were editing the gap size? I went to the gaps from the main column (container), but once there the option to edit is "Layout" not container? Again, am I missing something? Thanks
Sounds like you’re using the old version with Sections and Columns. To switch to containers, go to your dashboard > Elementor settings > Features and turn on containers.
But also, look up changing from sections to containers, it’s a big change in Elementor
@@LytboxStudio How do you get the containers to be side by side? I can only get them to stack on top of each other. In your video they are side by side?
@@kpviper7 you need to use the flex controls in the container widget. Going from sections to containers has a learning curve but it’s well worth it. I’d check out a few containers videos. Living with Pixels has a really good one.
Basically, is your containers, in the first tab you’ll see a bunch of options, those are your flex controls. To get the content side by side loom for the option with 3 bars vertically stacked.
@@LytboxStudio thanks again. Love your videos
unfortunately my blob effect apppears for the whole page and not only the cards section .. any help?
got it! forgot to switch overflow to hidden. LFG
Glad to see you got it!
Link is not working Jeff :)
You're right
It's fixed 😅
@@LytboxStudioGreat, thanks!
gracias, tengo un error con selector {
--blob-size:250px;
}
porfa ayuda
I'd love to help but need to know much more about the error. Join the Lytbox Academy community and get support 😎
It works but the mouse is long and overall shape instead of circle.
I'd need to see it to figure out what is happening.
Pity, its not working, the blue effect go's everywhere where is the mouse and no glow at the border.
not working
It lecture is so good but i want to know scripting what logic you have use.
Check out the blog post on this, the code was broken down more and explained how it works
veey cool
Thank!
where is HTML Code????
The code snippet is in the video description
Eli Plaza
I mean this is super cool but like why doesnt anyone ever cover designing for mobile then scaling up to desktop.
Most your audience including me love desktops but many people aka visistors don't use a desktop.
Would love to see some cool mobile stuff in this category.
Good question. The thing about effects on mobile, they can work against the user experience and need to be very carefully implemented. I have some effect videos coming up and will highlight when it’s also good for mobile.
My blob is moving all across page and is visible on entire page
Sounds like it’s not behind the mask
@@LytboxStudio Yes i tried everything and followed same steps 3 times but always same
@@LytboxStudio Can you help me out regarding this issue
@@hemangjiwani1625 try joining the Lytbox Community and reaching out there so you can share links. It's all in the descriptions