Animated card with HTML & CSS | Tutorial

in this video we're gonna be having a lot of fun with css we're really gonna be pushing what can be done with it we're gonna be looking at a lot of really cool things and we're gonna be doing it through one of the things i tell people to do a lot to get stuck when they're learning and we're gonna be recreating something that looks really neat it was suggested to me to try and recreate this card you can see on the screen right now this is from popdog.com and i thought this looked really really awesome it's a really cool card the animations or transitions and stuff going on are interesting there's a few little that number that sort of follows a certain spot there's some interesting things going on here and it sort of piqued my curiosity a little bit so i really wanted to dive in and take a look at it this video was recommended by a community member and i really apologize because i don't remember who it was it was a long time ago that it was recommended so thank you so much for that recommendation it took me a little while but here we finally are and we're going to be reproducing it now as you might have noticed this is a long video because there are a lot of different parts to it we're going from zero you're writing all the html and the css for it and there's a lot going on so if you do want to follow along and come back later i have time stamped everything so you can see down below there are some time stamps and you should even have chapters if you're watching this in youtube itself and you can skip to the parts you want to get to there's a lot of really cool things and fun things in here that we can learn from so let's go and check out how we can do it all right so here we are i am using vs code for this i do not have very much setup but i will show you uh what i do have pretty much nothing here and actually i don't even need this line um and let's just turn word wrap on for a second i just have my meta tag which isn't really going to be important on this one and so i'm pretty much just i'm linking to my css file here and over in my css or it is scss we'll talk about that in a minute i just have a really basic uh setup here we haven't done very much of anything i'm only going to be doing one of these cards there's enough going on here with that so i'm not going to we're just going to do one of them right in the middle of the screen which is what um this is all for and here's just some colors that i have set up i am using custom properties for my colors if you don't know too much about custom properties i think you'll figure them out pretty quick as we move through on this um for now i'm going to leave this open before i move over to my own page just because since we're trying to copy what we have here i sort of i like having the design that i'm working on on the screen while i try and do it so i have something to look at while i'm writing my html and so the very first thing i am going to do is a dot game so div class of game and this is you can see right there it says emit abbreviation if you don't know about emmett i write doc game push tab and i have all of that done for me if you are using vs code emmett is preinstalled if you're using another code editor you can add it in there through an extension okie dokie so my game is just going to be sort of the container for this guy right here that we're looking at and then we want to come in and there's pretty much two parts to this right we have this front thing that we're looking at here and when i have her on top we get this back section so i think the easiest thing to do is to create a front and a back uh we're going to worry about the back after we'll do each one of these on its own and we might even we're going to have to style them up separately a little bit as well and i think the first thing that we need in the front is an image so we'll come in here and i do have one already so it's in my image folder and this is i use this for all my demos so it is in here i called it game cover i believe there we go um so we can load that in let's just go take a look there we go that's the cover we'll be using for my very awesome game um alts i'm going to leave the all blank now we're just worried about the css more but i do want to build this out with you so we're doing html2 um so we see the name and actually right now i sort of want to be able to hover on this without it jumping around just so i can sort of illustrate things so i am going to open up my dev tools and from here i'm going to go over to my debugger and on the debugger i'm just going to hit pause which means we've paused anything from happening so you can see paused at execution and so it's turned white a little bit but that's fine um i just want to say like sort of what we're working on i want to move my mouse over here and not have it jump around on me um so we have my image we're still inside the front so the next thing that i want to do here is if we look down here we have the name of the game and then we sort of have this section over here with some information and some pictures so i think we'll split that up what i'm going to do is an h2 just because you know top games i don't even know if maybe it would be an h3 maybe h3 would make more sense here so we'd have like the name of the whole thing what is the you know that could be the h1 h2 h2 this would be an h2 that's the name of the section and then all these would be my h3s so i'm gonna do an h3 with the class of uh name and it could be uh like game name if you used to me i like doing stuff like that with emmet but i'm going to keep it simple for this one and we'll just say that it's not game name and in here i'm just going to write game name we don't need anything too fancy in there for now um and then i want this area down here so here we have two different things we have some statistics and we have the top streamers right now i think that is so i'm going to call it stats top streamers is sort of stats on the game so we can have a stats and inside of these stats um we'll put viewers and uh or even i'm putting viewers like that really this could just be a paragraph paragraph of how many viewers we have and then we also want to have uh let's call it streamers streamers like that and then here we'd need three images so img uh i mean img times three now for all of these images i have got them from uifaces.co so if ever you need something um it could be a good use resource i've also used pravitar in the past which is sort of like on splash it but it seems not to be working as i'm recording this so i had to go and find some images so i have image and here's streamer one and actually we can just uh duplicate those that's a shift alt and just down on the keyboard if you're on a mac sorry if don't know probably shift option but it could be a little bit different um so we have my three streamers let's just go c we'll fix the sizes of them after i just grab them straight from there so you can see they're different sizes but it's not a big deal they're tiny images ideally it would be a little bit more optimized because they're really small here but i want to make this more of a focus on the css um and the number here i guess i'll just steal the number five three nine point nine point nine k so there we go there's the text you know we're also gonna need this rank and the rank because the rank moves um if we go back and check my dev tools uh let's just turn this back on for a second because the rank moves around like side to side i don't want to contain it inside the front or the back maybe it could go in the back but i think that's going to be more of a nightmare than anything so i think my rank i'm going to put right here so we'll just do a rank like that and this will be rank number i'll do ranked number three just so it's a bigger number to make sure that it looks okay so i think that's good for the front i think that's all we need if we go and take a look there's not too much but we have all the the main things that we need we will need to get some icons after because you can see there's like a plus icon plus the play icon that comes in there and there's this little dude there we're going to bring in some font awesome for that later on for now what do we want to do we want to now work on the inside of here and one thing that i realized is there's a lot of javascript going on on the pop dog here so if i can't um because usually what i would do is i would find the parent here which is looks like it's this one and i would just come in and say on my hover hover and then it would uh let me see the game uh so it's just docked at the bottom you can see when it's hovering it's moving that up but it's not actually showing me the back which is kind of annoying so it's just moving that up because if we look in the dev tools if i hover on top you can actually see it's adding a completely new div when my mouse goes there so it's using some javascript and some mouse over there we're going to jump over to the network and i think if you're in chrome this is source uh what is it in chrome there's a different name for this in chrome uh or not network i want debugger but it is different i think it's sources if you're in chrome um and i do think it's the same in both and normally for javascript stuff like i'm in firefox because we're doing a lot of css um javascript you might be able to do a bit more with chrome but you can pause things when you want to pause there's a little pause right here but this is what i used before but if i pause it now i can't do anything but what i could do is if i do this and then i pause we're in a lock state um now this does work i think in chrome it doesn't actually get grayed out like this like it does in javascript but it doesn't matter i mean i can see enough of it here um sort of awkward that it does greyed out here but whatever so now we're in the back and we see all the different elements that we need to have in the back um so the first thing we have here is we have some like information right here so we can do a streaming info because it's how many people are watching and how many streams we have so in there we can say that we have uh just two paragraphs and we know p times two and both of these are going to have this uh p actually let's do the class first um i'm just gonna put game stats stat it's a single stat so i'm just thinking this is one stat here and this is another stat here now each uh times two because we want two of these so this is emit again and then inside each one of these i'm just going to throw in a span tag for now so let's turn off word wrap for a second so we have my game stat so here we could say that it's uh what is it 559 so 559 000 people are watching that and then over here we can say uh watching so 559 000 and then in the span how many people are watching or just says watching and then here we'd have 25.8 k and then inside the span we can put streams um i put the same class on both of them because they're styled exactly the same so i don't see why we wouldn't you'll notice here the name is there but i already have the name here so we're going to see if we can find a way to not have it twice in the html because to me that makes a bit more sense and again they are using a lot of javascript to populate all of this obviously all this information would have to be this is react that they used so they're bringing all this information in obviously here i'm making it static we're worried more about the css and html is a big part of that um but what we want to do um my idea here is that we should be able to make all of this happen without any javascript um and then you know if we were bringing in the javascript we could populate these numbers without having to bring in everything so it's one of the reasons um i think on theirs they actually have the just chatting is twice in their text i want to just do it once i think we can pull that off um so we have my streaming info and that has this and this then we want we have a button that comes in here um now in this case i don't know if that's more of a link or more of a button itself i'm going to actually make it a button because it is a javascript you know we are maybe it would just be a regular link i don't know but i'm going to do button um we can check what the behavior is i'm going to give that a class of btn and we'll put c more streams if that's just a link that's going to a page that has a bunch of stuff it could be an a like an anchor instead um but i'm assuming i don't know what they do we should check that out but i'm not going to unpause it right now we can always change that if we want to after um and then we need these three guys down at the bottom so i'm gonna do two things here i'm gonna do streamers do we have streamers already that's okay let's just do streamers again here do i want streamers again there let's do it and inside of here we're gonna have streamer times three so we have one two and three and then inside each one of these and actually let's go back then so inside each one of those we need their name so a paragraph dot and plus a paragraph called number it could be how many people are watching or anything like that but something like this would be pretty straightforward so we have a big div called streamers that's grouping all of this i use a display flex to make three columns then each one of them has a name so uh gamer1 and let's just do this gamer 2 and gamer3 and then here i sort of messed up when i wrote my image there let's just bring all that away and here here and here should all be paragraphs whoopsie sometimes you go a bit too fast with emmet number and the number for each one of these could just be 36.1 k 35 34 whatever we want um there is one other issue now though uh that i just thought of because it's going to be if we watch the animation uh on this let's unpause this uh f8 i can just close this actually uh the problem i'm thinking of is the items inside of this what if i click on the button i just want to see it is just a link so i guess it could just i don't know we could do that as a link instead of a button um i'm just thinking like it needs to be separate form from these other things because if it's part of those the way it's stretching everything else inside of there is going to grow with it there's ways of trying to fight that but it's giving me a bigger headache than anything else um so i think what i'm gonna do with my back and i'm just worried that it's gonna be a little bit confusing with my back there this is my whole thing it is gonna be a little bit confusing um but i'm gonna put in like should i just do bg background we'll do background and i'm not sure what i need to put in there eventually you can see we have that wave animation but that's going to come in another video um but that's going to be all part of this right here so i might need some stuff in there eventually but for now we're going to leave it just like this i think and now we can start on the css so this is the fun part now so let's save and let's go take a look over here and it doesn't look at all like what we want it to look like but that's okay it's going to get there pretty fast um now one thing with i am going to be writing sas with this but i'm going to be keeping it to a minimum it's just we have lots of nesting and stuff like that that's going on so i do think it's going to make our life a little bit easier if i am writing sas but again i'm not going to do anything too complicated if you're only used to regular css you should be able to follow along pretty well so the very first thing i'm going to do actually let's just i'm going to do font family it's not serif i'm not worried too much we can always change the font after but that's going to look a little better i'm also going to do i may be in h1 normally just like a simple reset i don't have all of these um and my paragraph two uh and just put a margin of zero on them because those margins generally get in the way we can always bring some margins back if we need to so let's take a look we're just going to do that for now and if ever i see that's causing more problems than it's worth we can always get rid of it but i think it's going to be good so i don't think like my main game thing here i don't think we need to put very many styles on it but one thing i'm going to do is just do dot game and we're going to do a position of relative because we're going to have some absolute position things in here for sure and i don't want them to be able to break out so that should just help with some very basic basic things and i'm also let's come in and i think we're gonna start with the front and just try and get the front styled up so for now just so nothing is distracting i'm gonna say my back and display of none just to simplify things for us for the moment and we'll obviously turn that off afterward um for my should we start i'm thinking we should start with my image and stuff right um and actually another thing in here we're going to want to do is image is all images we want them to have a width of or not a width a max width of 100 just so they can't get too big because obviously that could present some issues um if it was getting really really big okay so with that um i think the first thing we should do is on my game we should give this a we could do a max width i guess so it could technically shrink um i'm just going to give it a width of do do 200 pixels which would be 12.5 m i like using m and rem as much as possible um and it's just based on 16 so that times 16 should make 200 and you can see it's sort of at least it's constraining everything we sort of we have a place for everything to live now by shrinking that down and let's set up first these things because that's really distracting me so the first thing is if we come and take a look back over here we have the three images there and then we have this guy that's right there and that would be my stats so my stats are all of that so the first thing i guess we could do is i'm going to come in front and what i'm going to do is everything's going to be nested inside so i'm using sass like i said and it just makes sure that remember i had streamers in two different locations so i know that the streamer stuff that's being styled here won't leak into the stuff that's being styled over here um i'm starting to embrace the cascade a little bit more for things like this so i don't think like over nesting i think is a very bad idea but in this case i do think we can get away with it so what i'm going to say is streamers in here is a display of flex and actually if i think of it i think both like this streamers area is also going to be a display of flex so maybe that could actually come out and be for both of them i don't think that would be so bad but they're coming in like that it looks like crap right now but that's okay we're gonna get there um so my streamers the images in here so image and this is gonna work again for both of them the front and the back because in both cases they're circles uh we can say that our width is going to be 2m my height is height i gotta spell it right height is going to be 2m and they have a border radius of 50 and like that we get our nice little circles um now i have my number here and those guys are over there i'm just trying to think oh my stats that's right um so i'm going to come in here and say stats is display of flex there we go uh so those go next to each other and now it's going to be stretching if i do a border of one pixel solid red just so we can see what i'm working with we see that is what it is i have my two columns inside there so on my display flex i want to do a justify content space between so that they spread out and that empty space goes in the middle and i also want to do an align content not a line item sorry align items and i want to do a center on that so then the number will be centered vertically in that space so that is perfect the name of the game is my i just did name so we're going to say that my name is a text align center i'm only doing it on the name because i don't want everything to be centered and we can add a margin on that one now i know i took margin off of everything um we're gonna add that on i don't know why i want my two it should be like maybe a 0.75 there we go and obviously we don't need this red border on here anymore except i centered it um i was thinking here we have it centered but here it's not so that's going to pose a little bit of an issue um but let's take that text align off and if i do that i'm gonna have to with the margin of 75 and then zero or 0.75 and zero just so it's margin top and bottom only um so just like that we're actually getting pretty close to what we have right here now these guys are overlapping a little bit if we look at them um not a lot but they're overlapping a little bit so that does uh we have to sort of play with that a little bit so if i go like that there's no border on those ones and we have a border here so what i'm going to say is in my front my streamers img because if you remember all i have in there is the three images inside of streamers so i want those images to have a border that's one pixel solid and the same as my background color which is similar to theirs um which was my var color dark so if we do that we can't really see it now but let's just do five pixels so we can well they're just getting smaller but you can see it matches my background color but the reason i want to do that is because i want these images to be able to overlap each other a little bit so for this um i'm going to do my actually we can nest this use a bit more sass and i'll explain what this output would be in a second but we want nth of type and i want my first one to have or we want to move it over a little bit so transform translate x and i'm just going to try 50 and we can play with that number a little bit so my first one here should move over a little bit and those borders will shrink so you can see they're overlapping maybe they should be two pixels it's overlapping way too much um but you can see something like that where you can see that that border is coming through just to separate the two images a little bit now i'm going to select this whole thing and do a shift alt down and switch this one to a 2 and this should be half as much so if i do 25 it should move over and actually maybe that 50 was perfect so they're overlapping the only problem is this one's on the front now when i want it to be behind because if we come and look here you can see that left to right sort of stack on top of each other maybe it's a bit more than what they did but i find theirs is a bit too subtle so i'm going to stick with my design but i just want this guy to come to the front so one nice thing with transforms when i do my translate here i'm creating a new stacking context so that actually lets me do a zed index on here without having to set a position or anything like that so like that we get those nicely laid out just like that so that's coming together and that's pretty much my front had done we just need to fix up this rank here um so the rank isn't in anything so we might as well come over to here and put rank at the top because that's where it is in my html and let's go take a look so it should look something like that so we need a banner and all of that stuff um so we you know it needs that little banner type thing and we need the number inside of it i put the number already we have a three right there uh so font weight should be bold that one's easy i'm just putting bold like if i was pulling in a google font here or something we could give it the proper like 700 or 900 um and definitely for this one and i'm going to have to do a position absolute um whenever i'm doing positioning i like keeping at the top so position absolute and this is why uh it was important that we put a relative here so it's not relative to the page it's going to stay locked into my game card that i've created now we have lost it i don't know where it went but that's okay we're gonna find it in a second let's say top is zero oh it's here uh we can't see it let's give it a background and we'll see it so the background on this will be in rgba and just so we can do make it black and let's you know 0.5 so we can actually see it that's not terrible and to be able to see a little bit more let's add some padding to this so let's just try 0.5 m and see what it looks like got a spell padding right for things to work though uh that's not bad but if we look here um there's a bit more on the top and the bottom is going to need a lot more actually because part of the bottom is getting cut off so maybe we could do exactly that so it's 0.5 top 0.5 left and right and then at 0.75 for the bottom so the bottom will stretch out a bit more the i want to move it to the right side um so here my top is zero let's move it to the right now i don't want a right of zero because then it's going to go all the way over i want to sort of scooch it over a little bit so i'm just going to do 2m here to move it over maybe that's a little too much let's go look here yeah that's probably too much we'll try one then that looks better now for this what we're going to need is that shape that's coming in here so for this i'm going to use a clip path and the easiest way clip path css is to use this guy right here this is a really cool site you can generate clip paths really easily and we sort of have the shape that we want here but it's sideways i'm just going to move these points it shows you how easy it is to do actually we don't need this one and i'm going to bring you to the middle bring you down and i don't need the numbers to be exact i just want to sort of get the shape that i want here i'm going to copy what i got down here for my clip path and let's go try that out so we paste that in and the only thing i know is this number is off a little bit but let's hit save and see actually no i was thinking it would be but that looks pretty good so if i need to adjust it um we're starting at 100 zero we're moving to 100 100 we're going down all the way let's just break that off anyway we have we have this one here and then this one here and the one in the middle there is this one the 50 87 so it's 87 of the way up if i hadn't made it perfect that might have been like a 55 it's gonna move it to the left and the right um if that number is not right at 50 and then we can use this number here so if i made that 50 here it's going to move it up and if i make it 90 it's going to be really really small so i can control exactly the shape i think i'll go with like an 80. and something like that maybe it's too much compared to what they had yeah it's too much maybe even maybe the 85 is actually pretty good um i do think theirs is a bit bigger and i think it's just based on the font size um actually i'm going to move this font weight down to here because i like position top right they should all belong together uh font weight and then font size let's try a 1.125 m that rem there's i think their fonts a little bit more bold and their background colors a little bit darker like a seven five maybe six five anyway something like that i'm close enough i'm happy with that play with the padding do different things but um you know that looks pretty good and if we compare that to what we have here it's pretty darn close i guess the last thing i'm going to bring this up because we're going to need a few rounded corners um so i'm just going to make a br for border radius and we're going to try oops we need two hyphens let's just try like a 0.5 m for now and we can always adjust that number um so that would be my image right here border radius would be var vr wouldn't it oh no that's the wrong one that's my streamers i want you i didn't do that image oh i didn't give it um and i don't want to screw things up so i think i will actually we'll just give this a class of a class of thumbnail i think that would make the most sense so my uh front we'll put it right here dot thumb nail and border radius of var vr there we go that looks pretty good happy with that so i think the front is pretty much bang on i do need to bring the icon in we're going to do that a little bit later once we've sort of wrapped up everything else and that means it's time to bring in the the back again so we want to turn off this display of none um no actually you know what i'm going to turn that back on for a second i think the first thing i'm gonna do is i wanna work on the hover effect a little bit here um because it's gonna be easier without all that other stuff coming in oh and just i said that i was gonna explain the nesting here and i haven't done that yet so what this ends up equaling is the same as uh like if i had uh front dot streamers dot img which is for me is kind of scary looking but the way that these cards are constructed is so specific that and it also sort of forces somebody if they were going to create a new card to follow a really specific style so i don't mind this um so much so that's what that would create and here where i have the and what that's doing is it's the end is taking exactly what we have here so it's the same as having that and then so this would be my first set of styles and then it would have the same thing but the next one would here have my uh and of type one is what this is coming out too so you can see why it can be practical with this nesting and stuff so you don't have to re-type um your whole thing as much if you are doing any nesting whatsoever and the nice thing with this is it won't create like nested it's not nesting anything it's creating its own selector so i use it a lot if you're using bammer similar naming convention too you can keep you can prevent nesting and still have it nested in your sas or scss i should be saying okay side tangent there let's keep going um so when we hover what do we need it to happen we need the image needs to move up the name needs to sort of follow it so the name's going from there it needs to move up to there and the rank needs to move over and we want that background to come in so maybe we'll work on that background as well at the same time maybe the background would make more sense first and then we can come in with the rest of it and even when i hover i'm just trying to think here when i hover i can have i don't need to change very much i'm just going to play with opacities on a few things um yeah it shouldn't be too bad actually so let's come in with my so i have my back and then after my back i have my background kind of bad naming there maybe i should have called this something other than back um it's not really the back either it's like extra information so maybe it could have been like a more info or something but let's come in here and give this a color um so just so we can see it so we'll give this a background and i realized i don't have a color for this one um let's just try 234 oh there's nothing in it yet that's right so it needs to have a position position of absolute is going to help and then we'll give that a top of 0 bottom of 0 left of 0 and a right of 0. so now we should actually see it come in boom and it's position absolute so it's covering everything except this image which happens to have a z index on it but that's okay because i could do the z index of negative one on this and push it to the back there we go so that is all good except obviously we don't want it to be looking like this so normally we're not going to see it it's only when we hover that it's going to come in um but if we look at the animation the way it comes in is sort of like it's growing and it's fading in so to me the opacity at the beginning is at zero but before we worry about that um let's come in and say that the we're gonna give it a transform and i'm gonna transform the scale of it and this is one of the reasons i wanted to um break it on its own is because i wanted i knew we were going to be doing some transforms and some other things that were different from everything else um and if it was a parent of this stuff all the stuff inside it would also be getting transformed so the scale here let's make it um like let's just try 0.5 and see what that does um so it's actually completely hidden um and then i'm just going to add it down here at the bottom dot game hover and when we do that the back is um and this would again this is the same as doing game cover space dot back and this is gonna be a big part of what we need to do anyway so the back here we can do a transform and the scale we'll just have it come up to one so now if i save that game hover back back not back background so now if i do that oh there we go we can see it sort of growing a little bit maybe we need this to actually be bigger though because we want it to grow boom we want it to do something like that uh so let's add a transition of ease in we'll just uh let's just do 250 milliseconds for a moment just so we can see it so it's gonna look a little nicer right so that already looks better i think the scale i'm going to change though i want it growing wider more than it's going up and down um so we could do two so say i did like a 0.2 comma 0.9 just to show you the difference um you can see it's long and skinny so it's growing more from the it stretches wider than it stretches tall as it grows out of there so that looks pretty good except might transform and actually i'm pretty happy with that actually the only problem is the shape of it is completely off so if we look here it's i'm not worried about it sticking out the top i just think the shape is way off um let's try just doing one thing here so my front is when we hover on top we want the front to also move yes yes we do so the front is going to do two things it's going to transform let's just do our translate i only want it to move up so i can just do a translate of y which is the up and down axis and i don't know how much we need 50 is going to be way too much because if i do that negative 50 i should say that's me way too much it's popping up really high so i think i'll do 20 maybe or 30. we'll try 30. um now obviously we want that to transition so we're just going to come all the way back up to here to my front and we'll give this a transition for now i'm just going to do 250 milliseconds and we're going to come back and fix these up a little bit so there we go that looks a little bit better and down here let's fix my transform on this one as well i want to be a little less big and i want it to be a little shorter than it is tall so maybe even like a 1.4 and then this way at 1.2 maybe so there you go you can see it's it's not getting as tall and i think that's positioning looks a little bit uh nicer right there this i'm also gonna come in right about here let's give this the border radius of var vr um because i do want that to be rounded off just like that um the other thing i'm going to do on this is we're going to give this an opacity of zero and when it loads in the opacity will become one and now i want to make this a little bit more of a i want it to be a bit more performant so here on the transition i don't want this is just doing everything so i want it to be very specific i want to do a transition of my transform let's say 250 is it fast it's pretty like it goes pretty fast eh but we'll stick with 250 i'm going to change the the curve that it's on a little bit and i think it's going to give us more of what we're after and actually when i go off it just disappears huh i didn't even notice that before we can fix that that's easy and actually the way to do that is the transition on the background is only on hover and then there's that would literally that's all we need to do um so if we do that let's just stick with it for a second uh let's just finish this actually 250. um i'm going to just say ease in out for now we're going to fix that in a second we're going to have two transitions so i'm just going to do something like that so it's easier to read and the second transition that we want is on my opacity and this one's gonna be a lot faster and i'm at 100 milliseconds and we'll do linear um oops and there should be a comma here so now you can see when i go on there's an um a transition but when i go off there's no transition the background just disappears because the transition's only applying when we're on the hover state it's not applying the rest of the time so that's getting there i think that's okay we might play with that a little and again we want this to pop more actually right so let's open up the dev tools and i'm going to come and i'm going to go on my background let's just find it in here background there it is and the easiest thing to do is if i find it oh we're going to need it on the hover because that's where it is so if i go to hover i can find here i just want to click on this little guy and chrome has something like this too where we want it to go pretty fast um i don't want to go up like that because it's actually going to make it pop backwards a little bit so i want to make sure that the curve doesn't go over um i want to make sure that it's flat but it should go it should something something like this i think would be closer so once i have that you can see it is a cubic bezier but i can just come in here and i can actually just copy that cubic bezier and paste that in right here see it just pops out a little bit faster now and you can even play with these numbers a little bit and i want to just make sure that's at one and that maxes out at one um just make sure there's no backwards animation and maybe this the timing of this could actually be a little bit faster maybe even under just like that i think it looks pretty good uh now there is one other issue right now when we're hovering on top is that the image is shrinking when we do that so you can see it's there and then the image shrinks down as it moves up so we can do that relatively simple we already have it moving up here so my front while we have it translating we also want to have it scale down i'm going to do a 0.9 to start with i'm going to turn word wrap back on um the reason i'm going with a 0.9 is you can see it is shrinking maybe a 0.8 that looks pretty good so you can see that shrinks as it comes up the other thing is we want my dot streamers to disappear so the opacity here will go to zero um yeah we can tab this over so when i go like that we want them to disappear now do they just vanish or do they sort of fade out actually my animation might be a little bit off on that background because it seems to cover it as that comes in so if we compare it to mine uh my size might be a little bit off too we might have to play with things a little bit but actually you know what overall uh i don't want streamers i want it to be everything there which was my stats wait there we go so just like that and then we want the game name to move now the game name to move does give us a little bit of a um conundrum i guess i want to say um because when the name is we want it to move we need a lot of stuff to happen with the name here um so i actually think the easiest thing to do for the name is to bring in a animation um because i need multiple steps to sort of happen along the way so i'm going to come all the way to the bottom and we're going to bring in a keyframes uh we're going to call it game name and for these keyframes what do we want to do so at the zero percent so at the very beginning of this animation the text align is going to be exactly like it is now which is to the left and the opacity is going to be exactly what it is now which is at one and then what we need to happen is we want to make the name disappear so we can keep the text aligned at left but we want the opacity to quickly go down to zero we want it pretty much maybe this could even be 10 because if we look here it does fade out a little bit but it sort of just disappears and then reappears here at the top so we can do that then what we want to do is at 50 so it's at this point it's invisible we can't see it we can change the text align to center and we'll keep the opacity at zero and then at 100 what we can do is that the text align is still center but the opacity is going to move up to one so fairly simple but it's just to make them happen at all different times so now what we can do is my when we hover my i need that to go in both directions or only one way i'm going to try and only do it on hover but we might want to place it on both um so my dot name will get an animation of game name and how long should this take uh i'm gonna go i'm doing the whole let's try 250 i think that's hot and uh what i want is four words and this is important because we wanted to if you don't have the forwards it's going to reset at the end whereas forward is going to say stay at the end state pretty much um so if we hover there we go we can see it disappears and then it reappears there i mean see it does fade in a little bit and that's a little bit why i did this right at the left one we make it disappear then we're moving it to center but we're still at zero and then for the rest of the time it's gonna like from the 50 to here it's not moving anymore it's just fading in so we can see that it comes and it fades in um i didn't i did this with keyframes so using an animation instead of using transforms and transitions because you can't transition to text align so if you transition the opacity you're actually going to see it jump to the center as it fades out and then fades back in or something weird like that so if you do want it to fade in and even you could change this number and play around with it a little bit and it should always end up working not too bad um or maybe it's at like 60. you could play around with it you could play around with the timing of it a little bit and actually i don't like how it comes back so there is one there is one thing that's a little bit different now with theirs is when i go like when i come back everything at the bottom is already in place whereas on mine it sort of slides back down into place um i'm gonna leave mine like that just for simplicity's sake i think um yeah i am gonna do one thing here though is i'm gonna do a transform a scale i'm going to do like a 1.1 or 1.2 and the reason i'm doing this is because i want to make sure that the font um size isn't too small when we get up to that size up there i think it's fine like that um it's just gonna be a lot more work to make that work to get the image to move and the game name to line up in the right spot which is probably why they didn't do it the same way i'm doing it where it's the actual like they're not animating in theirs they don't animate that name it's here and it's also like it's two oops i clicked on it but it's like this is one piece of information and then the one there is another set of text so that's probably why they did that because you can sort of clean that up a little bit but overall i'm gonna live um with something like that we could even change it so like we don't see it until everything goes back into place but i think i'll leave it just like that another thing i want to fix right now is the rank you can see the rank disappears when i hover so one thing i'm going to do right away is find my rank and i am going to give this a z index and i do say z index and not z index i'm in canada so it should always be visible at least now it's all the way on the top and now my game hover the rank will have to move because we don't want that to happen um so this is where i'm a little bit worried about it getting a little bit finicky um with the numbers because i'm just going to come on here and do a translate and we're going to try and translate it to the right spot um and i don't know how much we're going to have to move this by so let's move it to the right first so i don't know 100 percent uh i always do this transform first transform there we go that should work um so we can see it's moving there now i need to move over a little bit and up so 100 comma 100 how much is that gonna uh negative i do that all the time i forget when you need a negative so you can see it's not it's moving up too far so i need to make this bigger and i think 150 here is going to be way too much actually i think i lucked into that one a little bit this is where i'm using magic numbers there might be a better solution for this but the 150 there seems spot on that's kind of cool but i do want to change this negative i mean this is i'm literally guessing 19 is not going to do it i wanted 90. and actually the background here i'm just going to change it for a second so i can actually see if it's overlapping at all like what's going on see that's sign of annoying like it's 74. i don't know if there's a better solution for this but just because they're completely unrelated like it's not connected to this background maybe i could but i have the background going to opacity zero when i'm off so like that's not going to work at all because then this opacity would always become zero um so that actually seems to be working really well so let's just go find my rank again and add a transition over here transition uh we'll do uh transform 200 milliseconds or we'll do 250 as well and we'll just do an ease and i think we'll be fine for that one oh that's kind of weird eh okay what we want to do actually then is where is that cubic bezier i think i'm gonna have to take this whole thing actually oh and i only said oh yeah i want this whole thing right here so i'm gonna change this for var yeah we'll just uh transition we'll just call it bar transition we'll use it where we need it not the best name if someone was coming in because they would think it's used for all transitions so if you have a better one by all means go for it um so now that's working and then we also want my rank to use the same thing so we can just put var transition there we go that's a little better it sort of moves with that background now that looks a little bit more natural awesome cool so it slides in and out let's go look at the original one again hey i think that's pretty good it's not the exact same animation that's going on but i think that's pretty good awesome so it is we are getting there we're getting somewhere this is uh taking a little while there's a lot of different elements that are going on on this though so that's good now we need this bottom stuff to start coming in so one way to make that easier is what i'm going to do i went too far sorry let's come here i want to find my back i'm going to just put an opacity of 0 because i don't want my back to be visible normally except opacity do i want an opacity of 0 yeah i will but i'm going to turn that off for a second um so we can see everything's coming in there and the problem with this right now is the content is stretching the whole card out um and we don't want that happening so i'm actually going to give this a position of absolute as well absolute um so now the background's ignoring that now so it's completely independent and then the let's say the we'll do a bottom i guess bottom of zero left of zero and right of zero just so it fills up where we want it to be but at least it's lining up with the bottom of our content there which i think will make it a little easier i might have to play around with that a little bit but obviously we want it to be opacity zero we do need that to be opacity zero and we're only worried about where it looks once we're here right like when we're here it doesn't matter at all so this is where i am let's shrink this back down we don't need it to be so big um so this is where what we can do is we want to find i know all this is really tiny let's just move some of this stuff over um on my game i can put the hover on so if i have hover on now we can work and not worry about it too much the only thing is you have to keep your dev tools open for that um so now in my game hover we have my rank we have my front and then right here i can come in and do my back so what do we want to change i guess the first thing that would make sense we can actually see what we're dealing with is if the opacity were up to one oh no every time i save that's gonna reset that okay uh there we go so we can actually at least see what's going on now and let's go take a look at our markup again because it's been a while since we did it so we have our streaming info which is those two that are right there then we have our button of course and then we have our streamers we go and look at the original one it's oh we've entered a mobile mode um okay there we go that's here so this is two columns like that with a line in the middle uh that's gonna be interesting i know how i'm gonna do that i think um good i call that streaming info so i think we're gonna start with the streaming info and we're gonna work our way from there so this is kind of fun um now this doesn't have to be in the hover so actually let's come out of there i want everything to be styled and in place so it like if ever i don't know what would cause it but i think it would make sense to style as much as we can over here and it just appears when we hover to me that makes sense um so here what we're going to do is our streaming info is going to have a columns of two and this is like the most underused css property in the world but when we hover we get look at that two columns already a good uh start and again this doesn't have to be nested i could have this on its own and you know there's no issue that should come up because it's the only place i have my streaming info so that won't cause any concern but i'm gonna keep everything it sort of shows where it belongs so i'm gonna leave it in there and we're gonna work like this um so on my game when we hover we get my two columns so that's really handy the next thing with that though that we need to do is we do have the stats right um so if we come in and take a look here we have the game stat for each one of them so in my uh dot game stat the font size i think needs to be a bit bigger so let's do that first font size 1.125 ram and i didn't realize this would actually refresh like that every time it's kind of annoying so i'll save a little bit less often and the span that is inside there i want it as a display of block so it's going to force a new line of content each time so you can see it's two lines now instead of one uh the span is also going to be smaller um so here we could do a font size of like point seven ram or something like that to shrink it down and i keep saying i'm gonna stop saving so often um that's probably way too small point eight five maybe um there we go so that's coming together and then what we can do on this is also do a text align of center and the really cool thing one of the reasons i wanted to use columns for this so everything's coming together but there is something with columns that people don't know is you can do a column rule so normally i'd use a pseudo element for this but if you use columns you don't have to it's like a border so one pixel solid i want to be white but faded out so we can do an rgba 255 255 and i don't know what we need point two five it needs to be pretty faded let's go take a look look at that isn't that so cool it just puts a line straight down the middle if you have more text that line gets longer it follows whichever column is the longest so that's perfection um and then we'll do one more thing on this one is we'll just add a bit of margin uh so we'll do a margin of 1m and zero so when that comes in boom like that so we're gonna have to play with the positioning of this a little bit it needs to be a little bit higher up i think yeah a lot higher up okay that's fine i'm not too worried about that yet but boom we get that coming in just like that i think we need that fade in and it needs to move up a little bit actually as it comes in so we're gonna have it fade in and move up but we'll get there once all the content is in place ah i think that looks so cool i love css columns when they work is this bold no it's not bold these could be faded out a little bit i guess my colors aren't the same but that's okay that looks pretty good um let's do my button did i give that a name or just put a button in there class btn that's fine uh the class of btn technically would be reusable and should be anywhere on the site so i'm going to come up and put it here if i was going to do that now if this button was very specific and only in that one location and never again used anywhere else i guess you could have an argument for nesting it but we'll do btn here so curse or will be a pointer and actually i could add this like on theirs their whole thing is clickable um so maybe actually we could have you know and there'd be some javascript listening for a click on that whole div and then it would go there or maybe even there's a link surrounding the whole thing whatever but we do want it to be a cursor whenever we're anywhere on there um but even even though again this would be a reusable button that could be anywhere so i can include that there border is going to be zero background is going to be i have one here i forget what i called it secondary color secondary var color secondary um what else do we want border radius border radius of 100 viewport width if you ever need round corners but not like a weird shape just do that and you'll always get a perfect pill shape color var color light padding is i'll go 0.5 m 1.5 m it might be too much that's not terrible actually my color is way too dark and the font weight is bold font weight is bold and again that would be probably like a 700 or something but i'm not so stressed about the typography let's come and fix my color in vs code if you have a color and you hover over it long enough you get the option of coming in and playing with it so you don't have to go somewhere else for a color picker there we go that looks a little bit more like theirs not exactly the same but we could play around with it a little bit and get it there um i'm wondering i just want to go back to here for a second my button is just here that's back and the back one thing i might do back back back there it is um i could do a display flex and then justify content center uh no i don't want that to play flex uh flex direction of row row would make columns no column i always mix it up when i want to switch that um display flex flex direction column oh you know what i'm going to take my margin off here too if i have this but flex is i have my flex and my flex direction column and then align items center and that should center it boom right in the middle like that now i should come in the hover on my button but i'm not stressed there because i am using flex i can actually take this margin off and we can add a gap gap of 1m this is uh i don't know where it's supported everywhere yet or not but that gap is going to work beautifully um in setting us all up for everything so it's adding a space there and there i don't think it's support or they might be if it's come to chrome it's probably not in safari yet let's go take a look uh can can i use gap the gap property for flexbox oh it is an edge firefox and chrome as i said it's not in safari yet hopefully they get there because until they do we can't really use it in production um but yeah it'd come eventually uh but you know it's just easier than fiddling with margins right now cool okay so that's not too bad now we just need to fix our gamers that are down here at the bottom i didn't bring their images in there did i and how did i call that i called it streamer streamer streamer you know what i did completely forget the images so let's go and bring those in um for this because there they have this going on um when you hover on top there it does complicate matters a little bit we can't just put an image and be done with it um so for that one what we're actually going to have to do for these three i'm just pushing alt to put my keep my thing in the place at the same time um i am going to bring in an image uh no sorry a div with a class of icon streamers icon that makes sense and in there we'll put our image and that should work and in my image is img slash streamer we'll just do streamer1.jpg and then change this guy to 2 and this one over here to 3. um so there we go now because remember when at the very beginning i knew that i wanted them to stay circles so that is why i had pulled um this out and left it on its own over here is because i knew i wanted to be circles here and circles here so i didn't nest this i left this on its own because i knew that the behavior of that would be exactly what i wanted and you can see if i didn't have this display flex on here either they're they're going one on top of each other and actually here they're not oh here they're just images so i didn't actually need the display flex to pull it off there but for this you can see it's screwing everything up so the display flex here is um is making it work a little bit better right there i'm actually running out of room i'm into the opposite problem that i thought i would have except i think let me just go look yeah we're gonna run out of room we're gonna have to make this a little bit bigger that's okay so that's actually not looking too bad now we want those to all be centered yeah so those for now it's going to work we're going to have to play around with this a little bit but actually can on here i don't think this would cause any issues with my other one uh streamers if i did a text align center there we go that looks a little bit better um the font sizes i think here are actually pretty small so i am going to make sure this is only in the back because now we're getting into styles that are specific to the back so my streamer we have two parts to stream it right we have the streamer name and number um so we're gonna say streamer font size is a 0.9 rem which should be pretty small actually i just want to check something um background pink do i have enough room hmm my align item center is working streamers i just stream let's just you'll see what i'm checking here uh dot streamers background of red yeah that's what i thought it looked a little narrow i wanted to make sure i'm using all the space i have available to me so the streamers here will need to get a width of 100 this one has to be nested in the back since i've used the same class in two places so there we go um and then this one can have it already has a display flex so i can do a justify content space between and then we should get them spread out that looks a little bit better um and then my streamer name is that what i called it i think i just did streamer name i did and i guess i mean this could just be like this name um would be font weight of bold there we go let me turn off that pink background super that's actually looking really really close to what we need we're we're almost there um so i want to space this out a little bit more um if we look at our game so it's positioned absolutely in here background is pink let's just say oops um it's it's in that space that we have which is why it is where it is i'm wondering what would happen if my back um [Music] back i did a bottom of zero i'm just i'm curious i'm not sure if this is going to work actually 100 doesn't work i'm going to put a top instead or yeah top of 50 instead and maybe this isn't the best way to do it [Music] um and i don't like magic numbers where i'm like top 52 and like 52 looks like it's like bang on for me right now that's kind of frustrating but because it is positioned absolutely i can't have it interact with the other content if you have a better solution to that than what i just did and i could just do bottom and do like a negative to pull it down as well same type of situation um so if you have a better solution to that i would love to hear it leave one in the comments down below uh we want to get rid of that pink background so like that the spacing of it's a little bit nicer i think she i could probably space things out a little bit more and i don't like this color that i'm using and not that one where's my back the background color i'm gonna go more with like a gray there's lighter or darker it's a little bit lighter or even this i mean this is where we could use a little bit of sass actually but even there that looks a little bit better so if we want to add the space here we want to add the space there we created our gap originally on our back so the gap i'm going to bring this up to a 1.5 to increase my spacing which that looks a lot better which means this i could probably bring up to like a 55 that looks a lot better now i just want more space on the bottom and the bottom is all being controlled by my background so my background my scale is going to be background so when i hover this can become 1.5 uh so maybe this becomes a 1.3 instead maybe we can just do 1.4 1.4 but now it's off on the top hmm i could do this too uh to cheat trends late and we just want to do y like 10 oh it's going gonna screw everything up though whatever uh five percent i'm not worried about my rank right now i'm worried about the rest of it let's go look here again it's a little closer to the bottom than i have there my spacing overall could be a little bit tighter so here maybe i would bring that down to a 1.3 what if i did 1.35 on both of them three five i'm gonna bring this back down to a two and do that translate translate y of like three percent it doesn't wanna be a lot and we're getting really finicky here maybe five that's gonna be too much though no i sort of like that it looks pretty even around the sides um i need to fix my rank but overall i think the spacing looks a lot better right now than what i had before so i'm going to stick with that let's just go fix my rank um so for that and again this is where we're getting finicky with all this absolute positioning which is kind of annoying i don't like doing this um it's the rank on my hover right so we're going uh this one we want it to move down a little bit more so this is if i change my background here it's easier to see again background red so at least i can see it and then i want to move it down that looks spot on i didn't think 60 would do it but perfect oh no it's not right on do we have to do like a 61. that looks better that sucks whatever that sort of sucks but it's not too bad so there we go that's looking pretty good now the one thing is when i hover on top everything's just appearing right like all these new pieces of information are just there and if we look here we get this nice little like they get a little bit of motion to them they sort of fade in a little bit so let's go ahead and do that so the first place i want to do that is before we get to my hover uh on the back of my card we're going to add a couple of things here we're going to add in a transition because we're going to transition a few things so we're going to transposition a transform we'll do my 250 that i've been doing and we're gonna do an opacity also uh this one can be a little faster 100 or 150 and we'll do linear on that one i'm not so worried this defaults to ease i think it's going to be fine um or whatever we'll just put ease in there so it's explicit so my back and then when we go to my back um and that means here we do oh the opacity is zero so that's good and we will do a transform translate y and i want to be moved a little bit so let's do like a 35 and move it down about 35 percent um and let's just see so that means on the back hover game hover back transform translate y and go up to a one we just go zero we want to go back to where we originally were so that's pretty good except there's this like kind of annoying overlap that we're getting um there at one point which is actually this way around it's fine it's be let's just come here for one second uh okay i'm just gonna put so it's the same thing here when i go this way it comes in when i go that way it should all just disappear um so i shouldn't have put all of that other stuff all right this is fine i want to keep this here but my transition is going to move down to right here so it only whoops oh yeah that's it it only transitions when we move the house on mouse on top it doesn't transition we move the mouse out so there it all comes in and out so then it fades um the opacity will fade in quite quickly so it's going to fade in a little bit and it's going to be moving up as that comes in so right away i'm actually i'm really happy with that i think we made a lot of really good progress i think that is awesome so there you can have it you notice that i didn't finish everything there's two effects that are left there's when you put your mouse on top of the streamer it turns red and then you get like this cool pulsing effect and there's also the wavy animation thing going on in the background of the background type thing um so i didn't get to those because it already took us long enough to get to this point and there's some very specific things that i want to focus on especially on that pulsing thing there's quite a few steps that we have to do that so that's going to be on its own video and then the last one is we're going to be using some svg animations and stuff to get that to happen so i think that deserves its own video as well so if you enjoyed this video if you learned a few things along the way and you want to make sure you don't miss out on those other videos please do make sure to subscribe so you don't miss out on them thank you so much for watching i'd love to get your feedback and if you enjoyed this type of video so leave a comment down below and if you have any suggestions for other things that you'd like to see me build out leave those comments down below i'll add them to my list a really big thank you to my patrons for helping support everything i do here every single month you guys are absolutely amazing and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 115,737

Keywords: Kevin Powell, tutorial, html, css, css card, css cards, css card hover, css card hover effects html css, css card hover transition

Id: YmyqlM13JUU

Length: 68min 51sec (4131 seconds)

Published: Wed Aug 19 2020