Тёмный

You Need This Hover Effect On Your Site ASAP (CSS / JS) 

Hyperplexed
Подписаться 645 тыс.
Просмотров 445 тыс.
50% 1

#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

Опубликовано:

 

11 май 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 313   
@Hyperplexed
@Hyperplexed 2 года назад
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!
@diegognoatto8706
@diegognoatto8706 Год назад
nice stuff
@labhamjain3915
@labhamjain3915 Год назад
also don't forget to add pointer-events: none; otherwise card won't be clickable because of z-index
@AvWoN
@AvWoN Год назад
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.
@codyrap95
@codyrap95 Год назад
Did you just refactor the content of a video basically? 😂 Thanks for the video, the tricks you showed are really useful.
@Mr-Raptor
@Mr-Raptor Год назад
i was just thinking about ::after
@arunsp767
@arunsp767 Год назад
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".
@WyzrdCat
@WyzrdCat Год назад
Reading first half I thought you were being sarcastic, was gonna be like BRUH 😂
@ahall9839
@ahall9839 Год назад
@@WyzrdCat Is that what you were gonna be like? Bruh? Bruh is what you were going to be like?
@Brotality
@Brotality Год назад
@@ahall9839 shut up
@dom8429
@dom8429 2 года назад
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!
@Hyperplexed
@Hyperplexed 2 года назад
For sure, glad you enjoyed it!
@alexwallsdev
@alexwallsdev Год назад
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!
@IvanIvanov-ep8zo
@IvanIvanov-ep8zo Год назад
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
@foqsi_
@foqsi_ Год назад
That would be cool.
@sebastiangudino9377
@sebastiangudino9377 Год назад
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
@kithenry
@kithenry 3 месяца назад
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...
@AlekEagle
@AlekEagle Год назад
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"
@Sneaadler
@Sneaadler 10 месяцев назад
thanks you for shedding a light on this design
@aminmahmidi1076
@aminmahmidi1076 Год назад
I really loved how you explain while writing the code, that was fun to watch
@skoodath
@skoodath Год назад
These videos are highly addictive and motivating! Great job!
@tyfine99
@tyfine99 Год назад
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!
@useruser-qo4mz
@useruser-qo4mz Год назад
love your tutorials! keep up the good work! 🔥🔥
@scout4808
@scout4808 Год назад
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
@themightysapien
@themightysapien 2 года назад
Quick and precise like the way I love it.
@Steveplays28
@Steveplays28 Год назад
Awesome work Hyperplexed, looks super cool and convincing!
@alexandruboscu5094
@alexandruboscu5094 Год назад
you just blown my mind, so simple but in the same time, so complex
@403gtfo
@403gtfo Год назад
Old school flash effects are back baby!! Love it :D
@AlvinIsChipmunk
@AlvinIsChipmunk Год назад
I am glad I found your channel!!! Great work!
@johnmendoza5398
@johnmendoza5398 Месяц назад
Beautiful video, I was looking for it a lot.
@arhabersham
@arhabersham Год назад
Mind-blowing effect and explanation!
@yopp1234
@yopp1234 Год назад
What an elegant video, great job.
@thedebapriyakar
@thedebapriyakar Год назад
so glad I found this channel man you're going to blow up soon enough
@amirreza3638
@amirreza3638 3 месяца назад
Love your content, keep it up ❤
@joni500para
@joni500para Год назад
this is beautiful, clear and understandable
@silenux7419
@silenux7419 Год назад
Such great content. Thanks RU-vid for recommending me this.
@VELIXYZ
@VELIXYZ Год назад
I just needed this. Thank you so much
@sebcuadros
@sebcuadros Год назад
Awesome video, thanks for going step by step 🙏
@beatcollection7314
@beatcollection7314 3 месяца назад
GREAT CONTENT. happy to discover your channel. i loved it🤩🤩
@NOTHING-en2ue
@NOTHING-en2ue 9 месяцев назад
very well tutorial i was looking for this, thanks ❤
@bigmistqke
@bigmistqke Год назад
Damn. Very nice one. Long time ago i learned something new from a css tutorial video.
@doolee5704
@doolee5704 Год назад
Very well done tutorial, props
@TheEndOfMadness
@TheEndOfMadness Год назад
Neat! You could make so many pens and tutos out of that source website. It's pretty amazing.
@kushangshah-be7hn
@kushangshah-be7hn Год назад
OMG !!! That was mind blowing!
@vladimirlopez6005
@vladimirlopez6005 Год назад
that is awesome! thanks!
@cmaxkratos
@cmaxkratos Год назад
Great work mate!
@tovape
@tovape Год назад
I've done this not so long ago and looks dope
@nailinnnr
@nailinnnr Год назад
thanks, it actually let me through so i could download it.
@ruzlansyahputra1729
@ruzlansyahputra1729 Год назад
Woah, great video mate!
@casbah4200
@casbah4200 Год назад
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 !
@martinn1071
@martinn1071 Год назад
mind-blowing! thanks for sharing
@dimrachkool3336
@dimrachkool3336 6 месяцев назад
Huge thank you!
@keven.menard
@keven.menard Год назад
Phenomenal tutorial!!
@DexterDemz
@DexterDemz Год назад
Wow thats actual Good content! Subscribed.
@mayukhchanda5805
@mayukhchanda5805 Год назад
This is amazing. Thank you. Microsoft uses the same animation for their desktop notifications tiles.
@myabdi4
@myabdi4 Год назад
You, sir, are a genius.
@dankcellarstudio
@dankcellarstudio Год назад
You got a sub, cool stuff
@nguyenlong1906
@nguyenlong1906 Год назад
Thank you so much
@DeepakKamat
@DeepakKamat Год назад
My man deserves a like and a subscribe.
@ethioapps836
@ethioapps836 Год назад
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
@comforth3898
@comforth3898 3 месяца назад
They are spying on us
@darkfrontier
@darkfrontier Год назад
Learned more in 5 minutes than a semester of CS
@__VishalSharma
@__VishalSharma Год назад
You are the magician of CSS.
@ChallengeAll
@ChallengeAll 10 месяцев назад
Just saw thesame style in my window 10, and out of no where and see this, wow thank you 😂
@diassagatov2195
@diassagatov2195 Год назад
learned a lot, tnx!
@fuzzy-02
@fuzzy-02 Год назад
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"
@subashkarki676
@subashkarki676 Год назад
why is this channel so underrated
@CharlieVillalobosDev
@CharlieVillalobosDev Год назад
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!
@fancieme1359
@fancieme1359 Год назад
You are a life saver thanks
@DEBO5
@DEBO5 8 месяцев назад
Yea usually I would set the z index of the pseudo element to -1 but it’s better your way
@Nanagos
@Nanagos Год назад
Windows 10 also uses this effect and I always loved it.
@GAGANDEEPSINGH-fv2rt
@GAGANDEEPSINGH-fv2rt Год назад
Your voice is amazing it's like listening high quality podcast
@approxahmed
@approxahmed Год назад
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 :)
@system8877
@system8877 Год назад
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
@Joao-oo8yj
@Joao-oo8yj Год назад
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 :)
@damar1967
@damar1967 Год назад
Windows did it first actually, sad they didn’t get enough credits
@sebastiangudino9377
@sebastiangudino9377 Год назад
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
@akippnn
@akippnn Год назад
​@@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.
@lewisone
@lewisone Год назад
Jesh. Brilliant.
@ridwanajibari4443
@ridwanajibari4443 Год назад
as a backend guy. this is so magical.
@ghoritauheed7182
@ghoritauheed7182 Год назад
you definitely earned a sub man ! also btw do you by anychance have any tutorails starting from the basics of html,css and js....?
@youssefkhaled1189
@youssefkhaled1189 28 дней назад
Thank you!
@danisk6368
@danisk6368 Год назад
Superb. very relatable that I wanted to know
@my_master55
@my_master55 Год назад
Bruh, I'm not even a frontend dev, but ur vids are fire, ngl 🔥
@BarcelonaMove
@BarcelonaMove Год назад
I am mindblown right now
@Novacification
@Novacification 4 месяца назад
You explained it well and the final code is very understandable but I'm not sure I agree that the effect is "pretty simple" :)
@hanzofuma
@hanzofuma Год назад
Finally i found how to do the windows 10 hover effect
@quintonrichards4805
@quintonrichards4805 11 месяцев назад
Wow, this is just wow.
@mafhper
@mafhper Год назад
Thank you RU-vid for me bring to me this channel 😎👍
@tmagrit
@tmagrit Год назад
Beautiful ❤️
@WeedmanPro
@WeedmanPro Год назад
I've always wondered how it works in windows 10 tiles. I got the answer now.
@raymondmichael4987
@raymondmichael4987 7 месяцев назад
Like how a windows calendar from the task bar , get highlighted when you have a date
@ozzyfromspace
@ozzyfromspace Год назад
you're a frontend god 🏆 your implementation is super smooth, and you're an eloquent instructor. keep it up bro
@ahall9839
@ahall9839 Год назад
superdy duper
@markusTegelane
@markusTegelane Год назад
that’s actually pretty clever ngl
@ankitsrivastava3972
@ankitsrivastava3972 Год назад
Just amazing 🎉
@chregig7967
@chregig7967 Год назад
Yes, but how do you center a div?
@SergiuGothic
@SergiuGothic Год назад
@sampletext69420
@sampletext69420 Год назад
Damn, Fluent Design
@KM-zd6dq
@KM-zd6dq Год назад
you are a wizard to me
@electricindro2236
@electricindro2236 Год назад
Amazing 🤯
@ChrisCoyier
@ChrisCoyier Год назад
Thanks!
@Hyperplexed
@Hyperplexed Год назад
Thank you so much! Glad you enjoyed it!
@SuperMBARutgers2013
@SuperMBARutgers2013 Год назад
Thank you.
@a7mdbest15
@a7mdbest15 5 месяцев назад
Loved itt
@rappy7541
@rappy7541 Год назад
That is so cool
@CodingW3
@CodingW3 6 месяцев назад
One more subscriber! 💚
@ubhelbr
@ubhelbr Год назад
I think it might be easier to simulate borders with inset box-shadow
@n3x404
@n3x404 2 года назад
amazing
@yassinaouini3044
@yassinaouini3044 Год назад
Thank you so much this helped a lot!!!! You saved my life
@lukaszpiotrluczak
@lukaszpiotrluczak Год назад
Very nice :) I like it!
@cantTouch948
@cantTouch948 Год назад
all of us trying to center just one div and bro just centered six like it was nothing
@TonyDzines
@TonyDzines Год назад
nice video 💪
@baraahalabialt
@baraahalabialt Год назад
U just earned a sub man. awesome content, keep it going
@PoorlySoup
@PoorlySoup Год назад
That is v impressive
@ericmp1199
@ericmp1199 Год назад
awesome
@Bonnie39
@Bonnie39 Год назад
Literally the Windows 10 UI
@Jorgeee
@Jorgeee 11 месяцев назад
Could someone please explain why he did "width: calc(100% - 20px);" on the .cards element?
@HiImKyle
@HiImKyle Год назад
I wish cool stuff like this didn't need JavaScript
@LynPaine
@LynPaine Год назад
New subscriber here😀
@danko5678
@danko5678 7 месяцев назад
I think it's a good idea to add a padding to #cards
@harrisoncreates
@harrisoncreates Год назад
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!
@SpukaMC
@SpukaMC Год назад
Same 😎
Далее
The Mouse Trailer With Smart Features
3:38
Просмотров 148 тыс.
ImNotGoodEnough.js
11:11
Просмотров 886 тыс.
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,4 млн
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 898 тыс.
A flexbox trick to improve text wrapping
5:02
Просмотров 159 тыс.
This Website Theme Hasn't Been Perfected Since 1996
9:43
Award Winning Animation With Only 20 Lines Of CSS?
6:59
The Easiest Way to Build Websites
10:56
Просмотров 295 тыс.
Subtle, yet Beautiful Scroll Animations
5:04
Просмотров 1,6 млн
Learn CSS Subgrid in 14 minutes
14:19
Просмотров 52 тыс.
800K Countdown
Просмотров 668
Can I copy this cool effect with CSS?
37:06
Просмотров 173 тыс.