Glowing Hover Card Effect - Bricks Builder
HTML-код
- Опубликовано: 6 июн 2024
- Cursor hover effects can be a really great way to spruce up your website design and make specific content pop out to your visitors. In this video I show you how to make a glowing hover effect on cards that follows the cursor around.
This tutorial was taken from Hyperplex's youtube channel • You Need This Hover Ef... and converted to a bricks builder tutorial. There are a few tweaks from the original to make it more maintainable and teachable.
Video Assets:
- Border Radius Calculation: / 1735216864249184448
- JS Script: pastebin.com/auJEzL9H
Socials:
nickarce.com
/ nickarceco
Timestamps:
00:00 - Intro
00:31 - Adding Cards
03:01 - Styling Cards
05:26 - Border Radius Trick
07:43 - Border Glow
16:02 - Card Glow
19:11 - Outro
Hyperplexed to Bricks Tutorials - a dream came true 😍
😉
I'm truly blown away every day with what people can do with Bricks. Cheers man!
Now do it in Gutenberg with native blocks. 🤣
jk. Great video!
I absolutely refuse to touch it. I watched your Gutenberg video last night while wrapping kids presents and I was cringing the entire time. I really want to see a Gutenberg advocate attempt it.
Me too. I think I've recruited one or two to give it a go. We'll see.@@nickarceco
Bro I need an complete course on Bricks by you. Honestly, havent found anyone doing this kind of stuff
Thank you brother! that means a lot to me!
Great video, Nicholas. Perfectly timed with a project I want to start. Thanks and Happy Holidays!
A good tutorial with a good outro. Thanks! Learn something new. 🙂
Great tutorial, thank you Nicholas 😃
Absolutely stunning! Love it!
thank you tobias!
Fantastic stuff many thanks!
Your Tutorials are realy good to understand. 20min and you got yourself a realy cool layout for services or features. Perfect.
Keep it going and Happy holidays to you and your fam
Merry Christmas to you as well! appreciate you watching Marcel.
Aaah we're back! Nice. You have a knack for these.
We are back!!
Super cool, was wondering how those were done. Great job explaining it too.
Appreciate it Sunny! It's cool to see you here. 🙏
Not only a great tutorial but very well paced and explained!
Thank you! glad it was useful to you.
You have a new subscriber, that was really good. I just got Bricks and went for Core Framework not ACSS so I'm learning those. This was really helpful, thank you and have a great Christmas holidays.
Thank you Ben!! Welcome!
Great tutorial. I'll be using 👍
send me a link here once you do!
Great stuff! Thank you!
My pleasure!
Really like it. But i have a small suggestion for you to simplify it. Just get clientX and clientY and set the variables to the document body. Then use it with background-attachement: fixed. This way you can use it everywhere and only have one event listener that's generally very useful :)
use background-attachment: fixed on what exactly? do you mean to the body?
👍🏼💫 Great stuff.
Nailed it!
good job!
Thanks!
I am blind and this is beautiful.
This effect was made just for you!
🔥🔥🔥
Nice tutorial. I'd love to see the Bricks JSON export as foundation for experiments as well.
If I posted the JSON are you just gonna copy and paste without learning how it actually works? The important thing is understanding how this works
@@nickarceco No, but find the issue in Bricks, which makes me fail to replicate the background layers properly, until I gave up for now.
Great video! Easiest way to make all cards equal height?
Whoops nevermind, applying 'stretch' to the wrong thing!
Love the Bricks content!!! ---- Do you prefer Advanced Themer or Automatic.css ?
BTW - Paid user of your Mega Menu.
I use both! I use automatic.css for the CSS framework then advanced themer for the bricks tweaks. I turn off all CSS framework features from AT. I've also enjoyed using ACSS BEM class tool more than the advanced themer one however they have minor differences so I leave them both turned on. For instance I can style on ID first then move those styles to classes with AT class converter which I cant do that with ACSS. Just depends. Love them both
Awesome Tutorial! I see you are using Automatic.css, any reason you are not using the context menus? (right-click menus on inputs and colors)
(I assume to make the tutorial more general?)
I honestly forget they are there to be honest. Thank you for reminding me. It will make my current project go much faster 😅
THanks for the tutorial, what app is this that you use for designing?
do you mean to build the page or do you mean the browser? using bricks builder inside of arc browser.
I followed this video and I ran into some issues regarding the hover effect picking up on the grid with the padding - it still just looks for the cards themselves, so it doesn't start "further out" like in your example.
Also, the local variables don't seem to work. I go to the Card (not the class), and try using different colors and can't get them to work. I don't have a plugin and effectively the only things installed at the moment are Bricks and ACSS, so it's not a "conflict" per se. Not sure what the deal is, a little bummed, since I can easily change the OG border and card colors, but not subsequent cards. Oh well, I guess the overall effect is nice, it would just be nice if it worked exactly as outlined here.
And now the footer is broken and the code running in the section above this card grid section is broken now too...
sooooo...effectively this entire video just broke all of the work I had done beforehand. looks like nice, but if it breaks everything, it's a waste of time unfortunately.
Not quite sure what could be the issue. It sounds like a step was missed somewhere. It also sounds like a var() was not closed. When that happens it can mess up the styling of a page
Hey Nick, how do you about with the clickable parent technic in this instance? I feel the z-index may override the stacking order.
The acss utility won't work as it sets the z-index to 1. By manually creating the same technique and setting the z-index above the rest, it works.
Was just about to recommend this. Glad you got it working
you could nest the same variables in the .card_content::after with difference value. No need to make double variables with different names and different values
You absolutely could! I don’t just because it’s much easier for me 5 months later to come back and immediately understand what I was doing and what affects what when I separate the two
I hope Mr. Arce is ok :( been awhile since his last video
Still alive! Been trying to get some cash flow so that’s taken higher importance over videos
I have a problem with the var(- -mouse-x) and y its not working even tho i added the js code in the code widget and execute.
Make sure it’s after your card in the DOM. When using JS that looks for an item the item has to load first for the JS to find
What app is the left blue panel with the shortcuts ?
that would be arc browser. Its been my go to and has replaced chrome
@@nickarceco thank you sir
HI! I followed this tutorial 3 times and nothing seems to work. There's like no effect at all, just still sitting boxes. I don't know what is wrong but I really need this effect! Can you please help me?
few things come to mind
1. with the newer bricks releases make sure you sign the JS code so it can run on the front end.
2. make sure the JS is after the cards. In order for the js to select the classes the code has to run after the elements its selecting
3. make sure you have the variables and classes setup correctly with no misspellings
@@nickarceco Thank you very much! It was with the class names... However I got a new problem, when I want to make a new set of card in the same page but elsewhere, the effect only works on one container
@@impactvisions You would need to select each instance of the grid. Here is a method you could use. You would have to specify each grid you are using it in: pastebin.com/Pzjafin9
@@nickarceco Thank you very much, bacground glow seems to work, but the border glow isn't . Can you help me please what could be wrong? (I've checked the calss names)
With more than 90% of traffic on mobile, where we have NO coursor, just touch ... all these efects are useless, and only bloat the code ?
Who are you making these efects for on a website ? Just to show off ?
How about some efects for mobile, touch, etc. Like a animated scroll, or a smart carousel effect, something useful for real live web ?
Cant we have a little fun? 😓