You Need This Hover Effect On Your Site ASAP (CSS / JS)
HTML-код
- Опубликовано: 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
thanks you for shedding a light on this design
I really loved how you explain while writing the code, that was fun to watch
These videos are highly addictive and motivating! Great job!
love your tutorials! keep up the good work!
🔥🔥
Awesome work Hyperplexed, looks super cool and convincing!
Quick and precise like the way I love it.
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...
Old school flash effects are back baby!!
Love it :D
I am glad I found your channel!!! Great work!
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
Beautiful video, I was looking for it a lot.
What an elegant video, great job.
you just blown my mind, so simple but in the same time, so complex
Mind-blowing effect and explanation!
so glad I found this channel man
you're going to blow up soon enough
Love your content, keep it up ❤
I just needed this. Thank you so much
this is beautiful, clear and understandable
Such great content.
Thanks RUclips for recommending me this.
very well tutorial i was looking for this, thanks ❤
Awesome video, thanks for going step by step 🙏
that is awesome! thanks!
OMG !!! That was mind blowing!
Damn. Very nice one. Long time ago i learned something new from a css tutorial video.
Very well done tutorial, props
GREAT CONTENT. happy to discover your channel. i loved it🤩🤩
Great work mate!
Huge thank you!
Wow thats actual Good content! Subscribed.
Woah, great video mate!
Phenomenal tutorial!!
mind-blowing! thanks for sharing
Neat! You could make so many pens and tutos out of that source website. It's pretty amazing.
My man deserves a like and a subscribe.
thanks, it actually let me through so i could download it.
why is this channel so underrated
Thank you so much
I've done this not so long ago and looks dope
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 got a sub, cool stuff
You, sir, are a genius.
learned a lot, tnx!
You are the magician of CSS.
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
Thank you!
This is amazing. Thank you. Microsoft uses the same animation for their desktop notifications tiles.
Jesh. Brilliant.
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"
Your voice is amazing it's like listening high quality podcast
Bruh, I'm not even a frontend dev, but ur vids are fire, ngl 🔥
Learned more in 5 minutes than a semester of CS
Beautiful ❤️
Superb. very relatable that I wanted to know
as a backend guy. this is so magical.
Just saw thesame style in my window 10, and out of no where and see this, wow thank you 😂
Thank you RUclips for me bring to me this channel 😎👍
Wow, this is just wow.
Finally i found how to do the windows 10 hover effect
I am mindblown right now
you're a frontend god 🏆 your implementation is super smooth, and you're an eloquent instructor. keep it up bro
superdy duper
Windows 10 also uses this effect and I always loved it.
Just amazing 🎉
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 explained it well and the final code is very understandable but I'm not sure I agree that the effect is "pretty simple" :)
Damn, Fluent Design
you are a wizard to me
I've always wondered how it works in windows 10 tiles. I got the answer now.
that’s actually pretty clever ngl
Amazing 🤯
Thank you.
Thanks!
Thank you so much! Glad you enjoyed it!
Very nice :) I like it!
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.
Thank you so much this helped a lot!!!! You saved my life
Like how a windows calendar from the task bar , get highlighted when you have a date
I can proudly say I was here before the 1 million sub mark. Your videos are absolutely insane, you're going to go much farther before you know it!
Same 😎
amazing
Loved itt
That is so cool
One more subscriber! 💚
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
nice video 💪
U just earned a sub man. awesome content, keep it going
That is v impressive
very cool video!
I think it might be easier to simulate borders with inset box-shadow
awesome
I'm so used to using Tailwind CSS for everything that I've forgotten how cool it is to write pure CSS! Thanks for this excellent tutorial!
I wish cool stuff like this didn't need JavaScript
Yes, but how do you center a div?
New subscriber here😀
Can you do the highlight loading we get on boxes during start up
yo i really like this setting vars on the element in js and then referencing it in the css, i never seen this before but it's legit af. makes sense lol idk why i didn't realise it works like this
i am going to use this to make some cool looking shit at work on monday and then bossman will say it doesn't match the branding and i'll have to remove it lol 😂