You Need This Hover Effect On Your Site ASAP (CSS / JS)
ฝัง
- เผยแพร่เมื่อ 11 พ.ค. 2022
- #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: ko-fi.com/hyperplexed (accepts PayPal, card, etc).
CodePen: cdpn.io/MWQeYLW
Linear: linear.app/features
Tools used: HTML, CSS, JavaScript
Music Credits:
Track: Light - Land of Fire [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Light - Land of Fire |...
Free Download / Stream: alplus.io/light
A couple of notes:
1. The "card-border" element can actually be replaced with an "::after" pseudo element on the "card" element, removing the need for an extra div.
2. On the "card-content" element, instead of setting the height/width to calc(100% - 2px) and setting a margin of 1px. You can set "position: absolute" and "inset: 1px" and it will achieve the same border effect in a cleaner way.
Learned this after making the vid and have updated the CodePen accordingly.
Thanks for watching!
nice stuff
also don't forget to add pointer-events: none; otherwise card won't be clickable because of z-index
Love your videos. One question, why not simply use padding on parent to content instead of calc-2px or absolute + inset? Padding is so much more useful than absolute because the content can decide its size that way and the parent will auto adjust correctly, or the parent can set a size and child can follow, work both ways. Is there something wrong with padding? Seems so much easier that I feel like I am missing something? I just implemented this with padding.
Did you just refactor the content of a video basically? 😂 Thanks for the video, the tricks you showed are really useful.
i was just thinking about ::after
Love how you wrote half JS logic only relevant to the current task and changed it later, instead of just writing the final one and going "you will understand this later in this tutorial".
Reading first half I thought you were being sarcastic, was gonna be like BRUH 😂
@@WyzrdCat Is that what you were gonna be like? Bruh? Bruh is what you were going to be like?
@@ahall9839 shut up
that's really cool. stuff like makes it feel so much more like a native app than a website I think. also love that the video isn't too long. great job!
For sure, glad you enjoyed it!
Watching you create complex design with such ease and explaining each step is very helpful
I would suggest taking your time in some other videos to explain some steps more easily, appreciate the content
Keep it up!
I really appreciate the small bite sized steps you're able to break everything down into, and instead of showing the end code and saying "we'll get to this later, for now it just exists"
You can take this further by adding dynamic text-shadow that will change its position relative to the source of light (move your mouse to the right, and the shadow moves to the left), and bumping up the shadow blur the further you go from the center
That would be cool.
That might be overdoing it. The effect is very minimal, it's supposed to be very light, not to be the focus of your attention.
That being said, that's a really cool idea for a different kind of website
Man's skill so clean I checked his youtube to find out how long it took him to be this good. Couldn't believe it was 2 years, even when the oldest video on there is from last year. So, went to his codepen, moved to the oldest pen, then looked at the comment section, the date? 6 years. Maan that's quite some time, salute the diligence.... could be longer coz even the oldest pen was top notch. CSS demi god we have here...
thanks you for shedding a light on this design
I really loved how you explain while writing the code, that was fun to watch
Awesome work Hyperplexed, looks super cool and convincing!
These videos are highly addictive and motivating! Great job!
love your tutorials! keep up the good work!
🔥🔥
Quick and precise like the way I love it.
The fact you are explaining exactly what you are doing is helping me learn much faster!! Earned like comment and a sub from me! Love these kinds of videos, keep it up!
This video brought back my motivation to keep learning web development. Thank you! The content is amazing and to me you code like a master
Old school flash effects are back baby!!
Love it :D
I am glad I found your channel!!! Great work!
Beautiful video, I was looking for it a lot.
you just blown my mind, so simple but in the same time, so complex
What an elegant video, great job.
Mind-blowing effect and explanation!
so glad I found this channel man
you're going to blow up soon enough
I just needed this. Thank you so much
GREAT CONTENT. happy to discover your channel. i loved it🤩🤩
this is beautiful, clear and understandable
Such great content.
Thanks TH-cam for recommending me this.
very well tutorial i was looking for this, thanks ❤
Awesome video, thanks for going step by step 🙏
Huge thank you!
Very well done tutorial, props
OMG !!! That was mind blowing!
Damn. Very nice one. Long time ago i learned something new from a css tutorial video.
Great work mate!
Woah, great video mate!
Love your content, keep it up ❤
Wow thats actual Good content! Subscribed.
mind-blowing! thanks for sharing
Neat! You could make so many pens and tutos out of that source website. It's pretty amazing.
You got a sub, cool stuff
My man deserves a like and a subscribe.
thanks, it actually let me through so i could download it.
that is awesome! thanks!
Phenomenal tutorial!!
i recently saw this feature on windows 11 and i was wondering and idk how but youtube recomended this content. and im rly glad i saw it . apprecaite it man . good job
They are spying on us
You, sir, are a genius.
learned a lot, tnx!
Thank you so much
I've done this not so long ago and looks dope
why is this channel so underrated
Thank you!
Jesh. Brilliant.
Waa I noticed this effect in my windows 10 calendar and I was like it's really cool hover effect sad that there's no tuto about this, then you made a video about it thank you !
You are the magician of CSS.
That's why I love programming, gives me the same feeling I had when I first saw a magic trick as a kid, then got shown the behind the scenes to it.
I was like "I want to be that smart"
This is amazing. Thank you. Microsoft uses the same animation for their desktop notifications tiles.
Wow, this is just wow.
Beautiful ❤️
Learned more in 5 minutes than a semester of CS
I am mindblown right now
Bruh, I'm not even a frontend dev, but ur vids are fire, ngl 🔥
as a backend guy. this is so magical.
Your voice is amazing it's like listening high quality podcast
Superb. very relatable that I wanted to know
all of us trying to center just one div and bro just centered six like it was nothing
Just amazing 🎉
Thank you TH-cam for me bring to me this channel 😎👍
Finally i found how to do the windows 10 hover effect
that’s actually pretty clever ngl
Just saw thesame style in my window 10, and out of no where and see this, wow thank you 😂
Windows 10 also uses this effect and I always loved it.
Loved itt
you definitely earned a sub man ! also btw do you by anychance have any tutorails starting from the basics of html,css and js....?
you are a wizard to me
Amazing 🤯
That is so cool
Damn, Fluent Design
You explained it well and the final code is very understandable but I'm not sure I agree that the effect is "pretty simple" :)
Thanks!
Thank you!!
I have noticed that Windows 10 has a similar effect in its UI and wanted to someday make it on my own, I am learning HTML and CSS (will learn JS after getting more familiar with CSS) currently and maybe in the future I'll do it using them too :)
Dont waste too much time in html and css..just make sure you have the fundamental in your arsenal..then as you make your own stuff .you upgrade em..just like your character in-game
yeah man. i've too noticed that windows interface has this design style, and i've ever thinking in create something identical. But if you will make this some day, know that this kind stuff can maked different ways. dont stay stuck only at video tutorials. good studies :)
Windows did it first actually, sad they didn’t get enough credits
Hi Dude, I would recommend to not think of webdev as you seem to be doing.
The idea is not to master HTML, then go to the "next stage ", and master CSS, then go to the next stage and master JS. That is going to hinder your learning greatly
Instead just learn the very basics from each one, and make a crude website. It's likely gonna be terrible. But then you can say: "How can I make it cool now?" And get ideas, you will then do your research and understand the features of the languages that you need to realize said ideas. And the beautiful thing is the web, is that there are hundreds of ways of archiving a particular objective.
So what would I recommend? I would recommend you to go to Figma (Hell, go to PowerPoint even) and design a website layout. Then turn it into code, and then slowly add functionality to it. There you will really understand the type of things you will need to learn, and put all of the right tools to the test. Improving greatly in the process
@@variables6700 when it's applied everywhere, you start adding more visual clutter and it makes things hard to read. I think it could've been better if it was tweaked at least rather than be removed.
I've always wondered how it works in windows 10 tiles. I got the answer now.
you're a frontend god 🏆 your implementation is super smooth, and you're an eloquent instructor. keep it up bro
superdy duper
Very nice :) I like it!
One more subscriber! 💚
U just earned a sub man. awesome content, keep it going
Thank you.
Like how a windows calendar from the task bar , get highlighted when you have a date
That is v impressive
nice video 💪
amazing
Thank you so much this helped a lot!!!! You saved my life
awesome
very cool video!
For anyone looking to have any interactable elements inside the cards, add "pointer-events: none;" to the "before" and "after" selectors. Otherwise if you have a button inside a card it will not work. Cheers!
You are a life saver thanks
Yea usually I would set the z index of the pseudo element to -1 but it’s better your way
New subscriber here😀
GoodJob!
Teacher : don't worry the exercise isn't so complicated
The exercise :
very cool yeah
Ok look, the video is great but you sound like you're speaking to me from the gates of heaven. 😭😂
Literally the Windows 10 UI
Yes, but how do you center a div?