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 in the entire grid.
This video came from Hyperplex's youtube channel https://youtu.be/htGfnF1zN4g?si=h9bp68myI6mmqNvz 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: https://twitter.com/tunayani/status/1735216864249184448
- JS Script: https://pastebin.com/auJEzL9H
- JS script for multiple grids: https://pastebin.com/D7f57Bks
Socials:
https://nickarce.com
https://twitter.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
