Animated card with HTML & CSS | Tutorial

[@peetboy]

These are exactly the videos (right content, right duration) where people can learn the most of the CSS. Thank you!

[@codzymajor]

This is excellent tutorial. These are what I like: 1) Seeing how you figure things out along the process is super helpful. That is something doesn't get transfer when you are following lessons online or in the books. Seeing masters at work is really important in the learning process. 2) Seeing the complete product as the goal for the lesson helps me to figure things out along with you. In a way, this gives me somewhat a sense how big a gap I have in problem-solving with what I know, 3) The length is great. You decided to break up using font awesome and SVG in another video indicates that is somewhat the extra mile you can go as a designer/developer. Thank you for putting up a great video. See you on Scrimba : )

[@JordanAF808]

Kevin Powell tutorials are the best break from 2020! That nice, canadian charm just warms your soul. :)

[@amolshrivastava7786]

kevin, it was an amazing learning experience watching you code the entire thing. It helped me solved my doubts about certain things. Please continue building such things.👌👍

[@CreepToeJoe]

I really enjoyed the learning process of putting this fancy hover effect together. Looking forward to the follow up videos!

[@ptrlrd]

Thanks for making this -- your quick little explanation of REM and EM made things click in my head. Super appreciate it.

[@randy918]

I think Kevin's voicetrack starts within 0.1 seconds of the video's start. I wish everyone else did this! I have someone I subscribe to that starts with ads. I think "getting to it fast" is important and Kevin does it in spades!

[@ra9r]

I have learned so much about animation just by watching you code and think out loud. Thank you so much! FANTASTIC!

[@Beraksekebon21]

Please,do more clone project either a full site or just like this 👊

[@ne9835]

Yes!!!

[@oussamabenchkroune3151]

@@ne9835 im with that 💖

[@geoffchat]

Yes, very cool to watch a reverse engineer of it. The guy who created this at Popdog is my close friend. He’s super talented.

[@MrGreenpaulo]

@@geoffchat yeah its a really cool design

[@Beraksekebon21]

@Gideon Javier wth

[@kirawesh]

I'm so enjoyed this tutorial and learned a lot. Thank you for teaching us so useful staffs.

[@danisob3633]

A tip i want to share for the streamers names and game name. The code shown in the video doesnt support names too long so if you do something like this (shown underneath), it will add 3 dots whenever the text width is greater than the max-width. For the game name: .front .name { text-align: left; margin: .75em 0; max-width: 80%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } For the streamer names: .back .name { font-weight: bold; max-width: 8ch; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

[@danisob3633]

also for the thumbnail, if u want a fixed size and the img to be cut: .front .thumbnail { border-radius: var(--br); object-fit: cover; width: 200px; height: 250px; }

[@noclistify]

Incredible content! I really appreciate you providing these, they have really helped me sharpen my skillset as a front end developer! You are fast becoming one of my favorite instructors in this space.

[@wongwanchap]

Setting transform-origin will make scaling the background much easier.

[@berad6034]

you are a savant and it is a treat to watch you work

[@geoffchat]

So cool! The guy who originally created this at Popdog is a close friend of mine. He’s super talented.

[@KevinPowell]

That's awesome! It's been so much fun trying to copy it! Really creative and so many little touches. We approached it a little differently obviously, but it's been a blast working on it! Say Hi for me :D

[@rutunjparikh2775]

It's not just only about learning it is also having fun to create things with Kevin. Great Video!!

[@ChrisFredriksson]

So awesome to see.. just.. so awesome! You know so many features of CSS, I'm not so much UI - even though I think its a lot of fun, I'm more behind the scenes with server side and sure, I can setup an ok UI look, but far from as good as you can just from memory and not looking up every specific transition and such.. Really fun to watch!

[@jarbyvid]

Excellent tutorial Kevin. Looking forward to part 2

[@dargy]

Easiest subscription of my life.

[@MartinJoergensen]

I really enjoyed that and watched every minute. Don't feel tempted to rush anything - or speed the video up... God forbid! It's a pain to watch. People who need speed can accelerate the video, the rest of us can enjoy your excellent pace. The progress speed is perfect since there's a lot to learn. Looking forward to the next episode.

[@carlosjimenez694]

Thanks!

[@adburns360]

Great tutorial. I class myself as pretty proficient with CSS but learnt a lot watching. Thank you.

[@kenturnbull9679]

Very good tutorial; keep up the good work. I find that, for me, learning by example has always been the best way. Please do more and don't worry about the time length; breaking the video into chapters and providing timestamps as you have done addresses any timeframe issues (IMHO)...but then I'm a West Coast kinda guy.

[@fastsolution]

This guy really knows stuff

people like you deserve that a lot of persons subscribe, excellent tutorials, sorry for my poor english

[@Xiaoxooooo]

Your channel is a gold mine of knowledge! Thank you! Why is this guy only have 154k sub? Give this man a 69M sub!

[@sakarsr]

Wonderful to watch your teaching. Please do more creative things like this. Good Day and Good Health.

[@brad5798]

Kevin all your lessons are awesome ❤️

[@phillaelony3035]

Man this is so great! I learned so much here. I really appreciate your videos keep it up!

[@cooljohnny9402]

i love these kind of tutorials. big real-world projects! hopefully more to come in the future! :D

[@ayushp5882]

Absolutely loved the video, do more clone projects. Very helpful, even solves our doubt while working on the project. Really appreciate what u r doing, thx!

[@machmachine]

Thanks for this lesson, Kevin. I've joined the course on Scrimba and I'm looking forward to learning more! :D

[@muhammadainuddin4650]

Great video! Please do more of these.

[@alsherifkhalaf7385]

Awesome , Big thanks 😊❣️

[@2005bgva]

Kevin, thanks, thanks thanks and thanks for all your videos.

[@travishill3002]

Your videos have taught me a lot, thank you.

[@andycascade]

I like your projects from a scratch, it was useful and pretty interesting hour.

[@adelbatal5224]

Awesome video!! I would add that you can just take a screenshot of the hovered on version.

[@shajedulshuvo6141]

More of these please! You Are Awesome !

[@KentaroxKondo]

I enjoyed this so much!

[@hitesh2543]

So it's the right decision for me to subscribe to this channel👍

[@BBroCodeCorner]

Awesome video 👍🏼 Kelvin sir ❤️ 🎉🎉🎉 I learn many CSS tricks from you...... And Thanks

[@ThomasAgain]

Really dig this one Kevin. Just found your channel and I love your videos. This one gives me some ideas for content on my channel, thx for sharing!

[@shadabanwar2101]

Learned a ton! thank you Kevin sir.

[@und3dpix959]

Your videos are great! It is a pleasure to watch, listen and learn man :D My Udemy course did not have grid, - I have learn it from you. The same with hamburger menu (css only), and now this! Keep on the good work :D

[@diegorocha2186]

Amazing content!!! I'm looking forward to the next video!!

[@sazidimtiaz831]

CSS king is here!

[@michelribbens8014]

As always: great stuff! Going to signup for your new CSS course later today

[@Alekobeats]

Good one Kevin, as always!

[@KostasOreopoulos]

Super great work!!!

[@BlueTreeCode]

Your posts are gems!

[@seanvinci]

Great video! Always interesting to see someone else's process. With 206 comments (at the time of writing) this has probably already been mentioned, but it might be worth repeating 'Game Name' on the back card. As much as I don't like repeating myself in code, if the game name is longer than one line, all of the text placement will break. Just my two cents!

[@eli007s]

Awesome ey

[@TheBorninmotion]

great transitions thanks!

[@ragnarlothbrook8117]

Just found your channel. Love your content!

[@george527]

How many "Do more, please!" comments we have to write?))) I love this video

[@captaindesign]

This was awesome, thanks Kevin.

[@asifmahmood9358]

One of hidden gem love from Pakistan

[@vagglord3156]

21:33 is there a specific reason why you use transform instead of negative margin, i would do something like: .streamers img:not( :last-child ){ margin-right: -5px; }

[@totalolage]

I was wondering the same thing

[@KevinPowell]

That would work too! My instinct isn't to go to negative margins, but in this case it would be fine 😊

[@jaspreetmaan121]

this man can calculate anything x 16 faster than a calculator

[@LokiDaFerret]

I would suggest a variable to control animation speed. And simply slow things down to see what is happening vs hover/unhover repeated. Especially if it is unclear which element you are focused on while debugging.

[@hassaneoutouaya]

THANK YOU SO MUCH!

[@tilakmadichettitheappdeveloper]

EVERY SINGLE VIDEO IS QUALITY CONTENT IN YOUR CHANNEL♨️ 👊🏽

[@brahimmzoughi5062]

thanks colin for this tutorial

[@felixjordan6346]

Good job!

[@jeffborges101]

wow --- really--awsome--css--forAll

[@Cholo981]

This made me realize how lazy I've become using bootstrap & co. I really need to start using this new features. And transation, they are much less scary now (and fun!).

[@jawad9757]

Yes

[@samuellovetro]

The problem is how you display a bunch of these in a container with flex. As the .game expands, any other .game on the same row will start moving. This can be done purely in CSS3, and here's what you're looking for: Wrap each in a . Then, use the following CSS: .gameWrap { position: relative; display: inline-block; overflow: visible; z-index: 1; /* Adjust to the size of the closed game */ width: 300px; height: 50px; } .gameWrap:hover { z-index: 2; } /* Add the following styles to .game */ .game { position: absolute; margin-bottom: 5px; background: #fff; transition: width 0.3s, height 0.3s; /* Adjust to the size of the closed game */ width: 300px; height: 50px; } .game:hover { background: #eee; transition: width 0.3s ease 0.5s, height 0.3s ease 0.5s; /* Adjust to the size of the open game */ width: 350px; height: 200px; }

[@ashprasad9075]

8:42 pause

[@gunawannurahmad8677]

this is great, thank you a lot

[@Clickyv]

It's so easy & genius

[@SabbirHossain-bi2bp]

amazing !!

[@alexandru3472]

Old video, but there is a powerful css trick you might have forgotten. which is calc(). Far more easier, for example: right: calc(100% + 10px); - works as well so :D

[@daulathussain3723]

Hi Kevin thank you so much for creating these amazing tutorial please make a course on CSS

[@kalyan4255]

Appreciation for the work kevin and a big question is running in my mind as a beginner like How to start to approahthe target?like whats your actual thought process when you first see a design and how you will start and move forward to approach the destination .Can you please make a video on it ?And also your way of structuring the elements ans styling them.

[@aakashsingh604]

Nice thanks Sir❤️

[@ashprasad9075]

Thanks man

[@wannabehuman.production]

watching at x15 speed

[@KevinPowell]

Haha, I know it's a long one

[@rngesus8057]

1.5x is the ideal speed for tutorials. The only time it's bad is when the creator doesn't talk at a consitent pace.

[@KostasOreopoulos]

@@rngesus8057 If you are doing along even 1.0x is fast and you have to pause, experiment, do your own tweaks and get ideas. If you want just to watch then yes x2.0 is fine too.

[@MohammadAbdulHyeShaon]

Awesome 👍

[@mjasprec2628]

thank you

[@avneet12284]

is there a github/codepen for this?

[@roamingcelt]

You often take suggestions from your comments. I think it would make a interesting 5min Friday and it's something I'm trying to do. I'm trying to give my layout an old black/green monitor look. The issue is the character glow and trying to get it right.

[@theegreatestever2420]

You thinking that such valuable information is very long and that is a problem is shocking to me. You are literally sharing amazing content FOR FREE and some people wanna complain that you are teaching them how to improve their skills or how they cant focus for short periods like an hour to improve themselves??? They should all GTFOH and let us who appreciate you thank you

[@KevinPowell]

Thanks :)

[@TheNamesJT]

30:30 my background covers the whole page and when set to scale(.5) it doesn't hide it not sure the issue here. I have the background html element as a child of .game could this be the reason? || Update: so the background html element seems to have to be inside the streamers html element as a child for it to do what is depicted in this video ||

[@renedekat3519]

Great video! I noticed that text-align won't update in Safari when using keyframes.

[@anishjoshi1999]

Love from nepal

[@sauravkumarjha6162]

where we can get this images

[@OskarPrice]

Sir, you obviously have fantastic content for frontend beginner. Can you continued make this layout to the and? I think its will good practise to all your subscribers

[@mattbrewerton6884]

How come you paused the debugger instead of forcing state of hover on the element?

[@romuloalves9349]

Ótimo vídeo parabéns ✌.

[@BrunoBarcelosAlves]

I love your videos and I'm learning a lot, but boy did that key press at 8:24 scare me! Were you angry at the F8 key or something?

[@alexjoshua5974]

Awesome

[@dannloloy]

Hello sir, do you have a video regarding on nesting/putting the child element class inside the parent element class like how you did on .game:hover where you put other classes like background inside of it?

[@mohamedyoussef8835]

Awesome Tutorials ++++++++++++++++++++++++++++

[@thobiaslarsen8336]

Hey Kevin! Thank you very much for this really great and informative video. I was wondering if there is any way to show scss content local in the browser, so like just from opening the file? Thanks!

[@maiklem]

Please do a JavaScript basics tutorial!!!

[@amircahyadi9219]

❤️

[@kediryibrie1008]

what is the plugin you are using to generate html tags .. that is awesome

[@javidiazz14]

How can i see the changes i do in vs at the moment in the internet without pressing F5

[@WebbikerAarleRixtel]

Why do you fiddle with your magic numbers in your editor? It is way easier to do the fiddling in de Dev Tools. And when you got it right, copy the numbers into the source file. There is even a way to hook up the Dev Tools to your project folder and let Dev Tools save your fiddling directly in to your source file. Well, Chrome can do it, not sure about FF. Also, I think the elements in the back div should have gone in to the background div. If you scale the children elements in the opposite direction, they won't scale with the background. And that way you don't have as much magic numbers... Maybe?