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!

[@JordanAF808]

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

[@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 : )

[@CreepToeJoe]

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

[@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.👌👍

[@carlosjimenez694]

Thanks!

[@berad6034]

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

[@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; }

[@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!

[@ptrlrd]

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

[@wongwanchap]

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

[@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.

[@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

[@ra9r]

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

[@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

[@dargy]

Easiest subscription of my life.

[@kirawesh]

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

[@fastsolution]

This guy really knows stuff

[@jarbyvid]

Excellent tutorial Kevin. Looking forward to part 2

[@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!

[@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.

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

[@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.

[@cooljohnny9402]

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

[@KentaroxKondo]

I enjoyed this so much!

[@2005bgva]

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

[@machmachine]

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

[@brad5798]

Kevin all your lessons are awesome ❤️

[@muhammadainuddin4650]

Great video! Please do more of these.

[@alsherifkhalaf7385]

Awesome , Big thanks 😊❣️

[@phillaelony3035]

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

[@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!

[@travishill3002]

Your videos have taught me a lot, thank you.

[@sakarsr]

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

[@shajedulshuvo6141]

More of these please! You Are Awesome !

[@diegorocha2186]

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

[@adelbatal5224]

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

[@michelribbens8014]

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

[@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 😊

[@shadabanwar2101]

Learned a ton! thank you Kevin sir.

[@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!

[@hitesh2543]

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

[@Alekobeats]

Good one Kevin, as always!

[@TheBorninmotion]

great transitions thanks!

[@captaindesign]

This was awesome, thanks Kevin.

[@sazidimtiaz831]

CSS king is here!

[@andycascade]

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

[@eli007s]

Awesome ey

[@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!

[@KostasOreopoulos]

Super great work!!!

[@jaspreetmaan121]

this man can calculate anything x 16 faster than a calculator

[@george527]

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

[@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!

[@BlueTreeCode]

Your posts are gems!

[@ragnarlothbrook8117]

Just found your channel. Love your content!

[@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

[@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.

[@brahimmzoughi5062]

thanks colin for this tutorial

[@hassaneoutouaya]

THANK YOU SO MUCH!

[@jeffborges101]

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

[@asifmahmood9358]

One of hidden gem love from Pakistan

[@Clickyv]

It's so easy & genius

[@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; }

[@felixjordan6346]

Good job!

[@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.

[@gunawannurahmad8677]

this is great, thank you a lot

[@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?

[@ashprasad9075]

8:42 pause

[@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.

[@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 ||

[@tilakmadichettitheappdeveloper]

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

[@daulathussain3723]

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

[@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

[@SabbirHossain-bi2bp]

amazing !!

[@aakashsingh604]

Nice thanks Sir❤️

[@ashprasad9075]

Thanks man

[@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

[@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

[@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.

[@renedekat3519]

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

[@MohammadAbdulHyeShaon]

Awesome 👍

[@alexjoshua5974]

Awesome

[@amircahyadi9219]

❤️

[@avneet12284]

is there a github/codepen for this?

[@mjasprec2628]

thank you

[@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!

[@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?

[@maiklem]

Please do a JavaScript basics tutorial!!!

[@romuloalves9349]

Ótimo vídeo parabéns ✌.

[@SuperDr27]

Thats some knowledge here..How many years experience have you coding? Seems like you doing this for quite some time.. :)

[@mattbrewerton6884]

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

[@js-swift]

thx a lot

[@mohamedyoussef8835]

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

[@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?

[@b4pap]

where can I get the images for the project? I checked your GitHub and no top game project.

[@mr.fancypants2914]

I don't know if you found it, but it's called popdog card on his github

[@manthkumar1094]

Amazing

[@anishjoshi1999]

Love from nepal