Guide on how to make such a css effect
I'm looking for a generic guide on which css features to use to make something like this?
Can this all be made via a simple background or does it require multiple html elements?
Anyone did something like this before?
6 Replies
I have no clue how to do it with pure CSS.
But if you're into using a library https://www.framer.com/motion/motionvalue should make it possible.
Motion values overview | Framer for Developers
Motion values track the state and velocity of animating values.
uhm I see
Add event listner on the div you want the effect to appear in, it needs to have an overflow hidden effect.. Create another element which has a state that represents its position on the page. On mouse move change this element state to the event client position. And that’s about it, you can add blur and color, I suppose you know that
Here is a cool video about how to create this effect - https://youtu.be/htGfnF1zN4g
Hyperplexed
YouTube
You Need This Hover Effect On Your Site ASAP (CSS / JS)
#tutorial #codepen
Watch as I show to how to recreate a sweet hover effect (from linear.app) that can span across multiple cards at the same time!
Support the channel: https://ko-fi.com/hyperplexed (accepts PayPal, card, etc).
CodePen: https://cdpn.io/MWQeYLW
Linear: https://linear.app/features
Tools used: HTML, CSS, JavaScript
Music Credi...
Logic is a bit different if you’re building it in react, however it’s after watching the video it’s pretty straightforward
tysm guys 🫶