CSS Card with hover animation and mobile fallback

⌚ Timestamps
00:00 - Introduction to the project
00:52 - The HTML
03:40 - Starting the CSS
08:47 - New HSL Syntax and gradients
11:35 - Adding the pseudo-element
17:32 - Styling the button
19:19 - Little details
21:50 - The animations
31:23 - Timing the animations
34:18 - Fixing keyboard navigation
40:45 - Making it work on mobile
46:01 - prefers-reduced-motion

#css

--

Come hang out with other dev's in my Discord Community

---

Keep up to date with everything I'm up to

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[ThiagoVieira]

Ah yes my daily dose of front-end improvement! It shall grant me better jobs ahead. 📈

[welikerosafloyd]

26:59
Other Youtubers: Move face-cam on recording software so we can see what they're doing
Kevin: padding-right it is

[GregSkriloff]

The hover media query, focus-within pseudo-class, and reduced motion media query are awesome!

[pph]

I just discovered your channel and it's extremely exciting to dive into all of your videos because of how detail oriented you are in explaining what and why you do something. Even when you don't fully explain something, you throw us a lead for us to Google. Thanks a heap, Kevin!

[RockcomLegendas]

12:11 "Click the card there if you wanna die".
Thanks for the lesson professor, very appreciated, but I'm not clicking that card!

[BehruzbekOtayev]

That was a hell of a lesson. 99% of the tutorials indeed end on UI elements coming together, and that will be all.
Great Job, Kevin. Love your work. Thank you very much.

[zachjensz]

When you said you had a lot of editing, I didn't expect an amazing 50 minute video on animated cards! It even has 5 animated YouTube cards throughout haha

[parthkharwar]

Every time you drop a new video, I watch it and then go spend hours modifying every site I've made to reflect things I've learned
Superb videos! Absolutely LOVE them
Thank you so much!

[AlleyDev]

This video was super helpful and I’ve learned a lot! I’m trying to get back into web dev after stepping back for the last 7 years for family, and a lot has changed!!! watching this and others of yours has really given me the confidence that I can get my career back on track and know what I’m doing again. Thank you.
I never even thought about tabbing on a card or if someone had animations turned off!

[welikerosafloyd]

This is the first time I'm this early to one of your videos, as I discovered your channel just last week. And you're already helping take my css to another level. Thank you so much for your content!

[ZackPyle]

One thing I've been a fan of lately is doing a --transition variable which is just the second half of the transition syntax (leaving off what is being transitioned) - so I do --transition: .2s ease-in-out; which then lets me do things like transition: color var(--transition) and then later in my CSS do transition: background var(--transition) which equates to even transitions throughout the site!

[jasonma]

The best meaningful CSS tutorial that cares about a11y and other situations. Thank you for your awesome work.

[avramitra]

I'm an embedded systems developer, but you sparked my passion for front end develpment. It's my new hobby now.

[carlosffm]

Definitely the best channel for beginner web developers

[heisthazey]

please make more of these! these are perfect for strengthening my css skills. tyvm!

[Morrile]

Outstanding lesson, and a very important one as the web is now accessed more and more on mobile devices, perhaps more than PC's nowadays.

[kuntaldas]

we can use *transparent* in linear gradient.

I use something similar to this 👇
background : linear-gradient(transparent 20%, rba(0, 0, 0, 0.75) 90%);

[RideTheTeacups]

@media(hover) - where have you been all my life?!? What an awesome tutorial!

I love watching other channels creating these wild animations, but I don’t implement them because of various a11y & mobile concerns. I think you’ve just resolved every single one of them in this video.

Instant sub. Thanks for the great content!

[istiakjisun]

YOU'RE THE BEST KEVIN! THANKS FOR THIS AMAZING AND 100% USEFUL CHANNEL. THIS CHANNEL IS AN ABSOLUTE GEM

[kaike]

omg, im programer student in brazil, and this guy is helping me a lot with my css learning,