CSS Card with hover animation and mobile fallback

sometimes making something look good doesn't always mean making something that's practical for example take a look at this card right here it looks awesome or at least i think it looks pretty cool but right away i know there are some concerns when you see something like this so let's see if we can't do this thing right here but with the following constraints we want to animate it with css only and we also need to think about mobile devices what happens if we don't have a hover to trigger the animation there's also dealing with keyboard navigation as well and also a solution for people who have turned off animations in their system preferences i think making the card itself isn't going to be too much of a challenge but let's see if we can't make this card and take all of those considerations in while we're at it hi there my name is kevin and here on my channel we learn how to make the web and how to make it look good with weekly tips tricks and tutorials and we're going to be learning a whole bunch as we try and solve all those problems with this card let's go and dive in so here we are in vs code we can see the finished design is hiding behind my head right here so there it is and whenever we're starting with something like this we are going to do this from scratch as you can see here we are in a blank html file so let's start actually with the very basics i'm going to put an exclamation point hit tab that is emmet if you don't know emmet there should be a card popping up right there for it right now and you can learn a lot more about how to write your html a lot faster i'll just call this fun animated card fun animated card whenever we're doing something like this where there's animations involved and all this other stuff i think for me the easiest thing is start with what i know how to do without any problems which is usually the finished state so don't worry about the animations and not worry about anything else let's just make sure we can actually get this and then we can work our way backwards a little bit to make sure that we can get all the animations in and everything else but we need this and this is also you know we can see everything we need here uh to be able to implement so let's start writing some code to see if we can get this to work all right so the first thing we want is just a card because that's all we really have so there's my card that's going to be there now what do we have in my card well we have an image it's just a background image though so i'm not going to worry about that then we have a title so i'm going to do an h2 with a card title i'm not doing an h1 just because i'm assuming this would be something awesome something that would be put into context with other things and let's turn word wrap on for now um so we have something awesome there for the title then i need my text that's going to be right underneath so that would just be a paragraph i'm going to call it card we could you know we could do card body just for the text there since we already have a class uh we'll throw a lorem 20ish maybe that's a bit long cut it right about there maybe um and then and again this is more emmet so you can check that video that i mentioned earlier if you don't know emmet at all and then here to learn more i'm guessing would be a link it could be a button but we'll do it as a link that has the class of button on there and we'll call this or it's going to go nowhere and let's just put learn more right there and i think that's all we need for our html nice and simple and very clean and if you're thinking about what about this guy right here that's going underneath whenever we have more decorative elements like this one um i think that especially because we know in the animation it slides in and out and it moves around and it's just a decorative element it's not a border because there's a little bit more going on uh but there's no content involved in that it's really decorational that's for me what pseudoelements are for so we're going to stick with a pseudo element on that so we don't need any markup or anything like that so with that we can get into our css so i think the first thing we should do is i have a css file already so i'm just going to come to here i'm going to write link css and just like that magically it's already linked and everything we need is there this is emmet and it's the default way it puts that out it'll just do style.css so if you have it somewhere else you might have to modify the href that comes in there but you can see i just have my style right there now i did mention i already have a few things set up here in my css file but there's nothing too much or nothing that's too important the main things that are coming in here are i just set up my colors as custom properties if you don't know about custom properties they're the best and there's a card popping up right there for them right now so you can check those out the typical box sizing border box which uh i put on every single project i do and then this right here and let's just refresh this so we get my background coming in and actually i put a hack what am i doing background here should be my var if you don't know about custom properties you don't want to check out that video i think you'll figure it out pretty fast and i do get questions on how i do custom properties um basically neutral is like my close to black neutral 900 means really dark 100 be white i only have three colors in here i think so i didn't really mess around with anything else but like 400 my 500 be slightly darker 600 be slightly darker um i also realized here i made a little bobo i don't have any commas there we go so the three colors we will be using and now we can dive in so let's select my card itself first um i think we can't really see any text or anything so let's start with my color i'm going to say that the color is my light or here i have my variable set up um if you're writing with vs code you just do hyphen hyphen and you'll get the access to all of them and then when you select it it will do the whole custom property for you so that makes life a little easier for now we can just say that the font family as well is just a serif and we can come in and if we want to tweak that a little bit after um okay so we have that we can actually see my card now that's a good sign or see the content inside of it i should say um let's set my background image on here background image is going to go to url and so we'll come in on here and say it's img folder and i already have it in there my card.bg i always get questions on this you'll notice i didn't put quotation marks around it um you don't have to if there's any spaces in the names you would maybe it's better practice to always have it but you don't need to have the quotations there uh we'll throw a background size of cover on here and we get my background size and we want some padding on there too right now for the padding because i'm doing it as a background image like you could go height and try and do things but i think the easiest thing to do is uh i'm going to come in with an 8 ram on the top and then do zero on the sides and zero on the bottom and i'll explain why in a second why i'm doing it that way um and there's even different ways you could organize the html to do what i'm doing but i just i think this is maybe the easiest way to set this up um so there we go we have some space on the top maybe we can make that a bit bigger we can come in with a 10. um and we can always play with this a little bit one other thing is i think it is a little bit big right now so what i'm actually going to do in terms of width and the reason this is happening is a little bit with my body and the way i've set this up because i have a place item center and i'm doing this for like styling purposes just to keep it in the middle for the demo um which is why i have a bit of this stuff on here but it's basically it's it's length right now is being dictated by this line of text because of that but i think what we'll do is throw a max width on here so the max width i'm going to do 35 ch and ch is fun because it will adjust to the font size that we're using and this is probably gonna be one of those videos where you're gonna see a lot of cards popping up so if you want to learn more about ch but basically it's 35 characters wide is how you can think of that um so there we go we start having my card come together and now actually i just thought of something um what i we need that background to be on there right let's pull our image back up here and you know we we're going to see that it'd be i want to have a bit of a background that's going to come in on this area and you can see that i have like some spacing around and there's multiple different ways we could do this but i want to sort of avoid having to use absolute positioning and everything so i think what we should do here actually is have a card um content right there and then we can close that so we're just grouping all of this stuff together so we're saying we have a card then we have this group of content inside of it it would allow you to do other things in here but the main reason i want to do that is just so i can supply a background to that and the nice thing with this is if we did have different images or different things that were coming in it would we'd be able to have different images come in here and it wouldn't matter what the image was it's still going to make sure that the text is super readable so let's come back to here and then we can say that my card uh content on this what i'm going to do is let's just uh we'll start with some padding so padding say 1.5 m and we get that spacing that's going to come all the way around that's what we're going to use so again you could have done something with the padding here but the reason i didn't want to do that is i want to put the background on this and i'm going to start with a black background like that and i want this black background to touch the sides that's the main reason i'm doing it now what you could do with something like this is you could come in with an rgba um right so you're used to like rgba and then we do zero zero zero and then like a 0.2 but you get that line that's going to show up here so i think the nicest way to do this is with a gradient i'm not going to use my custom properties for this we're going to stick with black but for me the easiest thing to do is just to come in same idea but we'll do an hsl first uh hsl hsl and there's different ways you can write just cell so you can write it this way with the commas separating and you can do this with rgb as well um i want to have the color doesn't matter because i'm going with black so i'm just going to do a zero so we're gonna have a zero percent on that one whoops percent is this one right there and then we're also gonna do a zero percent right here and then we're gonna do n over one and just let's just hit save on that and we should see it comes in as pure black so zero degrees and zero saturation saturation lightness they don't matter sorry the hue and the saturation don't matter because the lightness is zero if i did this at 50 it would be pure gray and if i go up to 100 then we would have a pure white so one one of the reasons that hsl is very easy to play with and this is my opacity so if i did a 0.5 right there you can see it's 0.5 and again you can write rgb the same way as this and it's going to work perfectly just no percentages um i don't know what the browser support is on these though so do be a little bit careful with it but we can say that this is going to be a linear gradient instead of doing it like this so let's copy that and say linear gradient and on my linear gradient i'm just going to pump it on two lines here because why not it makes it a little bit easier to see our steps and so we're gonna have that step comma that step and the only thing i'm gonna change is we're gonna go from 100 or one to a zero and let's hit save and i did it upside down and of course prettier's kicking in here and putting them all onto one line but that's okay um so let's just look at it again so i want this to actually be a zero and this one to be a hundred percent or one i'm saying 100 so i keep writing 100 but we can do that and then we get it fading from black all the way down um the only issue that's happening with this is that because it's going from zero to one it's like a smooth gradient the whole way and it's possible that yeah like a white thing at the top so you could add a step in here so we could actually say it's zero and then we could come in here with another um so we could say like copy paste that in so we have like a point two here but that could be right away at like ten percent of the way um there we go it's formatting it nicely now so this number here let's just make this one a 255 and like a 50 on here um so we can actually see the color come in uh let's just bring it up to one actually so we can see it so there we go so what it's doing is so it's just saying like go from the the black trent like this black transparent then by by 10 of the way in we want it to be pure purple and then fade from pure purple to pure black so you can choose where you want that to be so you can see the more i move this is the step on my gradient the more i'm moving it around so i want it to be like right about there but i want to keep it as black so we can keep this at a zero keep this one at a zero keep this one at a zero and maybe this could be like a point two or point three just to ensure that it's dark enough at the top so we still get it fading out but we're just sort of making sure that it's faded in enough to make everything uh nice and easily uh nice and easy to read all right so now we need uh the line that's gonna come underneath our title and we also wanna style our button right here so a few more things that i think i know how to do so let's come in and that was our card title so we'll start there card title and we're going to do a after i don't need to style the title itself i want to style the after and what we're going to do on here if ever you have a pseudo element you always have to give it the content property so we actually so you know it shows up in the dom without that it never will if you don't know about pseudo elements they are the best and i have a whole series that dives into them as usual check click click the card there if you want to die really deep dive into pseudo-elements um so yeah we have my content so for this one i'm just going to give it for now i'm trying to think because of the way this card is let's go take a look at it again because of the way it's coming off here i want to use a position absolute because i need to break it outside of the padding that we're inside of you could use a translator transform as well i guess to pull it out but i think an absolute position would be the easiest way to do it so what we can do is on here come in with a position of absolute we'll give it a height of i don't know three pixels and hit save we need a background on there so background will be my color it was the accent um and we also because it's position absolute who knows where it is right now let's give this a width of like a hundred uh 100 there it is and so it's kind of going crazy right now um most of the time when you're doing something like this the you want it makes it easy when you use position absolute with the the thing itself so like the card title here because it's going to link it to the card title's position so to do that you need to make the card the containing block so that means card card title would become a position of relative relative which makes it the containing block and the advantage with that is you can see the width is actually matching the width of my title now and then what we can do is say that the left height is okay so we're going to say left is zero so to move to the left it's matching the left there and we're also going to say that the top is zero i guess actually we want the bottom to be zero not the top bottom of zero so it's lined up on the bottom like that uh let's make this maybe four pixels okay um and now i do want to move it over that amount and actually there's two things i want to do i sort of want it to always match the width of the content so here on the title itself um let's give this a border border or an outline outline just so it doesn't shift anything outline of one pixel solid red and even though the title is shorter than this line of text it it's a block level element so it's taking up the full width of the area that it's inside of um so even if it was just the word something this box would be that full size so what i'm actually going to say is that the width here is max content um this would break things so it's a little bit dangerous um in a sense um so the width max content means that if it's as long as it's one line of text uh if it's multiple lines it will sort of break a little bit it won't work the way it's working right now but as long as it's one line of text the width will match the width like how big the text is so here if i come and i take off the word awesome you can see the width is matching just the word awesome so it's a little bit like making it an inline element but it's still a block element like an inline element the width is always the width of itself by default so it's sort of like being able to control it that way in in a way it's a way to think about it um so we have the max content so now my line is the right length because it's matching the width of this except i need to pull it back a little bit so this could be somewhere where you could use a custom property that's locally scoped just to make your life easier so here we could say that the we could come in with padding of 1.5 m and then what we do here is we say that this is var padding and it looks exactly the same and this is locally scoped meaning like i can't use this padding outside of card content this this variable only exists within the card content uh but inside my card content i do have my card title and my suit element here so what i could say here is my left is actually var or we're gonna have to play with this a little bit but var uh padding it's gonna move the wrong way so it moves that way so what i'm gonna do is a calc and calc times negative one so it actually moves the other way except it's not moving i know why i know why this shouldn't have been m this should have been rem so it's consistent there we go um because this font size is bigger than the card content the padding here would be relative to the card content of its m and over here it was relative to the font size of the title which was bigger when it was m so by doing rem it's going to my root m it's always the same you don't know about m and ram you know the drill all right so that's good except we want it to match in length there so then what we could actually do is plus oh no the left is good but we want to reuse this here where is my width width we could then wrap also in a calc so we say calc take all that do 100 plus my var padding so it's doing the padding plus the width that we just said on that and the nice thing with this is if i ever decide to change the padding it's always going to be fully adjustable so i only have to update one value and all of those things are adjusting on the fly so three padding it's working two padding it's working one padding it's working whatever i'm setting on there it's going to work each and every time i think that's pretty cool um so there we go that is working out perfectly there and now we just need to style my button so this one i didn't call it card button because you know it could be used for different things so we'll start with the cursor cursor pointer it's not actually a button but you know just in case it ever was on a button element as well makes it a bit more reusable by doing it this way text decoration is none color will be my dark color my background color will be my light accent color which is that one well i just realized i didn't use my variable here in general if i have variables set up i do want to use my variables that's there perfect i'm going to turn word wrap off i don't usually have it on with my css perfect uh display i want this to actually be inline block there we go um because then color background color we can come down to here and add some padding we'll go with like 8.5 m 1.25 m i do like having padding on buttons in m it's a little bit big uh that's okay we can have a bigger button than we'd planned for originally i know we need some curved corners on all of this we're going to get there eventually as well um but that's looking all right now we do want ideally a hover and maybe a focus state on that my focus is oh it's we're in mozilla so we can really see my focus so um what we're gonna say is my dot button hover comma dot button focus and we'll just make the uh background color will be my lightest color which is my neutral 100 and with that we can also change my color to be the dark color because we can't read uh oh no we should be fine on that that's all we need there we go and that means if i tab onto it as well you can see that it is highlighting it like that okay cool um i said we're gonna get to it after but you know what let's let's add those rounded corners to there now so that would be my card itself and it's going to be hard to see here a little bit but i'm going to do maybe turn our background color off in a second if we come on here with a border radius and i'm going to make it bigger than what i want right now just to highlight what's actually going to happen is a problem here down at the bottom so let's turn off this background color so we can see it better and you can see that at the bottom of the card it's actually squaring off and that's happening because the card itself has round corners but this that has that black background on it doesn't have the round corners so to fix that we do need to throw an overflow of hidden on here and that will solve that problem and everything gets rounded off like that so that's good uh this we're gonna pump down it's a little bit too big and there we are 0.5 would probably be good awesome and then we can put our background color back on there we go so we get our nice card like that super duper uh our button i think we also want some rounded corners on there so we can do a border radius of 0.25 and that should be perfect there we go so we have a nice little button there let's go look at what our finished one was we're pretty much there awesome um one thing we could do actually and this is a little bit in the same um we'll do it because we did it for the other one i want to lighten this text up just just a scooch just a scooch um so that would be i want to select only the paragraph really so card title right here would be good uh card we called that one card body so we could do um a color of rgba and i'm going to do our rgb just to show you you can do this with hsl but also we can do a 255 255 255 over like a 0.8 or 0.9 and just to show you that the rgb also works here and if you want you can also oh the new syntax isn't supported so it won't show you the what color that actually is but this is a new syntax for rgb and for hex that you can use uh again i'm not 100 sure what the browser support is for it yet but um you know uh and if you are doing this with text it's one way to lighten it i'm not saying it's the best way uh but it is one way to lighten your text just to make sure you don't overdo it because it can make things a bit harder to read so yeah there is my card and it's pretty much working and so now we need some interaction and we need stuff to happen to it right because it's it's getting there we're we're finding our way but it's definitely not finished so how can we add the hard parts now which is getting it all to move so i think we'll start again start with the things you know and then go from there so one of the easiest things to do is when we go on our card we want to grow and shrink just a little bit so we're going to start with that so let's go on to my card itself um so what we're going to do is come in here and say that one my we wanted this to be on hover right so dot card hover we want the transform of scale and we're gonna do like a one point oh f whenever you do scale like you don't wanna do the scale much because even like a 1.1 it really makes things like explode in size i find that's a lot anyway the other thing you might notice along the way when you're doing this is like some things get a little blurry sometimes it's just it just happens especially while it's transitioning so it's getting bigger or smaller now we can say a transition of the tran transform um and let's just do like 500 milliseconds ease should be fine there we go so you can see as the animation's happening sometimes things get a little blurry um there's not a ton that we can do for that sadly um you can also see this little white line that's showing up we might play around with that a little bit to try and get rid of it but i think it's an artifact of the overflow actually we'll see if we can get rid of that after uh but there we go so that's working when we hover on top but what happens if i tab in well if i tab in nothing my button highlights which is good that'd be good that would be really nice if i tabbed in and it also did the same thing well i don't really know how to do that so maybe we'll come back to that after i do know how to do it by the way but but we'll come back to that after let's again we want to start with the simple things so the simple thing there's that okay another thing is i want the title to i want everything to be down and then move up that's kind of tricky okay let's we have the whole thing needs to move up and the things need to blend in but then i also have this line that needs let's start with the line because i think the line would be the easier one to do there so here's my card title after so maybe the easiest thing to do here so what we want to do is here we can say card hover and then when we card hover we want the card title after it's an interesting selector um and then we want to take that and we want to say that we're going to transform scale and we're going to scale x i always mix them up y is up and down so we do a scale x of one we're already there right yes so what we actually want to do is say that here we have a scale of zero and now it's gone and then it appears so it's gone and it's back so once again transition transform uh we'll go with what was it 500 milliseconds ease and now you can see it grows and shrinks aha but it's it's growing and shrinking from the wrong place hmm so one thing that's really important with animations or transition transitions in particular is whenever you are i'm first actually the transition i'm i'm making sure i'm not doing things like width it you get much better performance uh when you're doing things with transforms or opacity if you can limit your transitions to transforms or opacity you're always going to get higher performing transitions i'll add a link to the description that talks more about that uh some really good articles that go into how everything is done and why that's the best things that you should be animating or transitioning and another thing is like just because in this case as we see like it's doing it from the wrong place but you have control over that so let's go in this is where you can actually do a i'm going to leave it here with my transform we can do a transform origin and that says where you're transforming from and i want to transform from the left and you can get more specific than that but look at that it's coming in from the left and then going away cool so we solved that problem now we need the whole thing to move down and then to move up into position when we hover okay so everything here is wrapped inside of my card content so we can take that whole card content then so let's go up to card content and let's move it down so once again if we can move something with a transform um transform we do like as much as possible so this is instead of taking a position absolute and moving it down and then moving it back in changing the top bottom left or right try as much as possible to use your transforms instead so transform i'm gonna do uh translate x or y it's y this time and we want to do this is where it's a little bit of a guessing game where we want to move it down the font size is so many different things could play into to action here and look at that and now actually this is where that overflow hidden is really coming in handy because it's sticking out the bottom like that and it was hiding because we had an overflow hidden so it would just disappear so now if i hover on top it's doing its whole thing but we also want that to come back up okay um and actually you know what i'm going to do on my body here just because my face is covering things just a little bit and say padding left of like 10 m right of 10m no go up to 15. ah there we go okay so you can see things a little better now but we can see that that's sticking out the bottom right there so what we want to do and i'm going to leave the overflow hidden off here because it's hard to work when you can't see what you're working with and we can turn it back on after so that's going like that that's great so now we already have our we have to come in with another cart we have a whole bunch of stuff happening here on card hovers um so on card hover we can bring this down here and if you're using sas like you could also simplify maybe with a bit of nesting and stuff on this um so cardhover.card content and what do we want to do with that we want to bring the transform back up to 0 100 0. we don't want to transform so now it should click up and down there we go so it's working properly that's perfect um except obviously we don't want it sticking out the bottom and we need to animate it so let's come in and transform uh transition it not animate well it's an animation transform 500 milliseconds ease and so we go over it comes up and we go down and it goes off so that's starting to look not too bad i'm sort of happy with how that's working except it looks a bit well it looks a bit weird because we have this big thing sticking out the bottom so let's fix that there we go so that looks a little bit better i think we're getting there we're getting there i'm actually going to go on my card title for one second here bottom i'm actually gonna make this like negative two pixels i just want to move that bar down it was touching the g a little bit and that was bothering me there we go that looks a bit better um so it's all it's it's all working but we want those steps that we saw at the beginning where different things are happening at different times and so we can easily do that and there's two different ways um you can add in transitions you can add in your transition delay into these but i think it's a lot easier to delay things at the right times and actually there's another thing we want to do is put the opacity on all of this stuff here we have some and you know here it's where it's a little bit awkward whoa what whoa look at that if i hit tab it it highlights that and it moves up but then i so okay we need to fix that that's for sure um which we will we will so yeah tabbing seems to be causing a big issue right now until i hover on top to fix it which is kind of awkward so we need to fix that and i want to fix these animations and stuff so what we're going to say is my card content hover that's all fine so what we'll do here actually card content we have that we're gonna say is card actually now let's start this here just to be consistent so we're gonna say card content and then we could say that i'm gonna do this to begin with and say opacity is zero so it's all going to disappear and we can't see anything we just have the black box that's moving up and down now which is kind of useless but then here when we hover we could say that now we'd actually have to come in with this guy again so dot card hover then we want to select the card content everything inside and then this will get a opacity of one and now when we go on top the opacity comes in and then the opacity goes down so here we can transition that opacity uh opacity we'll go with the same thing 500 milliseconds i'm going to do linear on the opacity actually so now it fades in and it fades out except it's weird that we have a title with no text on it so in this case what we want to do is instead of selecting everything we want to say everything accept or not think of not a lot like accept select everything but not or except for my dot card title so now my card title is visible but when i hover on top then the opacity comes in on everything else and there's something weird happening with my button there we're gonna have to investigate that that's super strange but at least that's working it's coming in and it's working but there we go so my opacity is transitioning as it moves up and then when we go down it goes back down and you know what we're going to do is we're actually going to take this guy right here and also put it on the opacity of 1 just because i don't think we really need it but it you know we're doing it on one side so we might as well have it on both of them at the same time um so we're getting there but now what i want is i want the bar to be drawn then i want it to move up then i want that text to fade in all right so we want the bar is coming in at the right time we have the bar coming out that's step one now we also need to fix the thing with the tab happening where oh my goodness it's even more broken now because when i tab on oh there's nothing because i'm not hovering so the opacity is not being fixed oh my goodness okay so there's that problem that's still happening there's also an issue where so that sucks and also what happens i mean that's with the tabbing what happens if somebody doesn't want animations we still have to deal with that also what if i mean one issue with all of this is mobile devices if somebody's using a mobile device they can't even hover on top of it so we still need to figure that out but again let's focus on the things we know how to do so let's we've done all this transition work let's time these transitions out a little bit first so the bar is good then let's go to my card content itself which was actually let's move this one to here we're doing card content then we're doing the card content hover then we're doing our knot thing and then we're doing the hover for that knot thing just so it's a little bit more organized same thing here we have my card the card hover card content card content hover we're doing the card not thing the card content not thing hover right so just to keep it a little bit more organized um so what we can do here is on the card content we have our transition and again you could put the delay here i just find it so much easier to do a transition delay over here on its own and you can add this here no problem at all and so now we go like that it comes in and then it goes up and then it goes i don't really want it to do it that way around i only want to do it when it goes up and what's interesting with that is you can actually take it off of here and put it only on the hover then so we're going to delay it when we hover but we're not going to delay it when we're removing hover because this is when we have this it's the the default right so we delay it when we hover but then we don't have it when we go that way ah that's kind of cool right there we go delay it that way and then don't delay it that way and then we might as well come on this one and do the same thing on this where we can do a transition delay and we can do 500 milliseconds on this one as well so there and then it fades in we still have to fix that button and maybe this could actually be a bit longer or maybe this is even a thousand so it moves it goes up and then it all fades in look it also helped fix our buttons somehow this i actually think is a firefox related problem and not something that's in chrome and i am in firefox right now where it was the moving and the opacity might have been causing a little bit of a glitch on that one but there we go so it goes across goes up fades in so nice so wonderful that's great and that's you know and then we go off and it all just disappears so for me i'm super happy with that i think that works super super well now we just need to fix all these problems that we have with it because this is usually where the tutorial ends right we get to this stage it looks great but then how do we deal with mobile devices what happens if somebody's on mobile they don't know to touch it um and then does that even activate it if somebody keyboard navigates it's completely broken so how can we fix all of that um so and we also you know we have to take into consideration people that are uh have prefers reduce motion so how can how can we handle all of that um i mean it really breaks when someone's tabbing so what we're going to do is we're going to look at this and let's break it down and we're going to look at also i know if you're using sas this could be a lot easier because you could have a lot of nested things but that's okay what we're going to say is card hover or dot card and we're not going to say focus but we're going to say focus within so if the card has a hover on it it's going to grow in scale or if something inside the card has a focus it's going to scale up um but we we know everything is still kind of broken so i'm not even going to test that yet let's let's leave that like it is now or should we there you can see ah it did it got a little bit bigger and if i shift tab out it gets smaller hit tab it gains in shift tab it goes out it's just we broke our layout so we have to let everything come in fix itself okay so if we keep on going from here the next thing we want to do is so that gets bigger it's not really perfect that's actually this is a really interesting thing that's happening right now as you can see when when i clicked on that the the text actually came up so here what i mean by that is like we have to let this whole thing run right now but when i tap on that it's coming in because the focus the overflow hidden and when items have an overflow hidden they and they gain focus uh it needs to be within view now the opacity is zero so i can't actually see it but the browsers will do this on purpose because if something is hidden away they want to make sure if it gains focus because someone is using a keyboard they want to make sure that it's actually visible to the user so this is something that in this case won't actually cause us any issues once we're finished but it could be something if you're working on it just if weird things jump when you tab into something that could be one of the reasons why it's happening but let's jump back into our code here so we have that their scale is going up now i have to hover on this and let this whole weird thing happen to get rid of it again but now we can jump in so here is where we have the card hover the card content this is what's actually making it happen right this card content right here on the hover is where it's coming up when we hover on top so what i want to do on this one now is we can do the same thing we're gonna do a dot card focus within uh dot card content now it's not gonna fix it yet and i'll explain why in a second but if we tab in you can see it's kind of weird right and if i tab out it fixes it and it goes back to normal which is good so you can see now like we can actually escape it without having to run that weird janky animation thing that was happening um but it's that weird thing where this happens and then it moves up again and this is that side effect that i was just talking about it's going to be less visible in chrome chrome actually handles this is firefox i do most of my css dev work in firefox uh just because the dev tools are a little bit better and chrome is catching up but they're a little bit better still for css but what's happening is it's forcing it into view and then because it's been forced into view then it's running that animation and it does that weird thing and then it well it goes well now that i've finished that animation i know it can actually be there so then it drops back down so that's why you're getting uh let's let the whole thing run so it can go back away it doesn't want oh we're focused in that's so now that's why when i do that you can see it does it and then it drops back down and it's kind of weird right so this is one um place where we'll we will have to do this we're gonna say card focus within uh dot card content and we're just gonna say that it has a transition duration of zero milliseconds and this is going to overwrite my um this one here so here we're saying it's 500 we're getting more specific we're lower down in the cascade all of that good stuff so now if i tab in it's instantly going to be in place already there's that one little glitch but actually it doesn't happen in chrome let me pull chrome open here just so you can see the same thing here in chrome let's get out so if i tab in it goes into place and if i tab out it goes out of place um firefox gets this little glitch there where it jumps but it's it's not that big of a deal um so we can see it's working now we have a few other things but this will just stop that weird you know this prevents some issues from happening it just means that it won't move up slowly that's we're sacrificing something for people keyboard navigating but it gets around weird glitchy behavior so i think it's worth it uh another hover effect so another hover effect means we should probably copy the whole thing paste it underneath let's go fix a few things we want to get rid of that into a comma and here we want to switch this into a focus within uh so this one's our opacity so now if i hit tab the opacity is working and then that means i can also shift tab out and it goes back hit tab and it all comes in um it could be worth maybe changing the transition delay here so just because like i tab in there's nothing there's nothing and then it comes in so if you wanted to you could do a little bit like what we did here where you change the transition delay for or transition duration or actually in this case it wouldn't be the duration it would be the delay so you could change the transition delay within focus within if you find it's too long i'm going to leave it like this just to keep the code a little bit simpler um but uh and we still haven't done the underline so once the underlying comes in there it's not going to seem so bad i think but if you wanted to you could um only for this line to break that off onto its own and change the transition delay there and finally here we have this with the hover so we can duplicate that line of text change that into a comma and card hover becomes focus within and now let's hit save tab that goes over that comes in shift tab out that's working and if i go on like that it's also working here so in both situations it's working pretty good obviously a little bit different for if your keyboard navigating but i think that's perfectly fine and we're getting there so that's great but we have two more problems uh the first problem is what if somebody is on a mobile device so this is something to be careful if you are in firefox and you go into the mobile mode there is somewhere in the settings for firefox that you can get it to behave like chrome when you're in it oh it's this guy right here there you go that little hand enable touch simulation this is like what it is in chrome by default um and because i'm in there you can see now that i'm hovering on top it's not actually doing anything so you know i'm hovering nothing's happening i turn that back on it's like a monum so this shows you if i'm on a touch device well nothing's actually happening and if i click nothing's happening and well that's kind of awkward right this is really really bad so what we're actually going to do is we're going to change some of the stuff we have here and i know this seems a little bit weird and i guess we planned all this from the beginning this could be something that could have been overcome from the very start so this is really where i think it's we we're taking the happy path we've gotten things working we're taking all the steps we're working on one thing at a time and not trying to do everything at once because that's always a bit of a nightmare now once you know how to do all of this you can sort of put them all together and do it more of a more of an organized way from the very beginning but i sort of wanted to break this down and focus on one thing at a time just so we can really focus on one thing at a time because i think that makes a little bit more sense so what we're going to do is um basically we're going to have to change anywhere and we can leave the transitions that's not really the big deal what we don't want necessarily is the scale which we don't have to worry about but we don't want uh some of these things where things are hidden away so this i don't really want so i'm actually going to take both of these here and we're going to cut that i'm going to do it like this at the beginning and if you want to change it all afterward by all means you can uh we're going to use an app media and here we're going to write hover you know you can do that you can cool right so we're saying hover and you might also see this written as hover hover and there's not just hover that you can use here there's other properties that you can use as well now this is hover there are other ones you can use here as well when you're using hover like this it really means that you're doing it as the primary pointing device so if the you know some you could be on a laptop say that has a touch screen but the primary pointing device will still be the mouse so it is it can't make that distinction it doesn't know if somebody is doing one or the other but it's focused on the primary pointing device so if the primary pointing device can hover what do we want to do well now our card content will get this and you notice now it's not down but watch this i'm going to turn i'm going to click this little guy here and let's hit refresh look it's down there now it's down there we have hover let's turn turn that back on let's hit refresh and now it's up there because when a device has hover it's going to move it down if a device does not have hover then it's going to keep it up here oh that's kind of cool um and actually i said i was going to leave this here but i think what we're going to do is we're going to do a control x to cut that and let's find anywhere that we don't want to have certain things on so actual i mean all actually let's undo that all of this and all of this and all of this and wait wait let's keep going we're going through a lot of things here okay so all of these things can come and actually go inside of this media query right here so let's drop that in right there and hit save look we can see everything the only thing missing now is our after and that would be coming from only pretty much this guy right here right so that's my card title after so i'm just going to cut that hit save it'll come back in and then we can come up here and do my dot card title after and put that in so now what's happening let's just take this whole media query and we're just going to bring it all the way down to the bottom let's let's i'm going to leave my buttons after but we're going to throw this down here so if i'm on a touch device like we are right now we're on a touch device on this touch device right here if i'm on this i can see everything nothing's hidden it's always there i can go i can see all the content but then if i come in and let's just open it up a new tab and we'll look at both of them at the same time maybe let's come in here to a new tab look at this so this is the same page touch device versus not touch device so the not touch device we get our fancy little animations all running and i mucked up one thing clearly because that's going all the way across but here we have no animations nothing weird no hidden content that nobody can find and then over here everything is almost working let's go see what i did wrong there uh card title after that's good oh i put cart card there we go so let's just turn that off hit refresh and there we go so we have all of our cool little animations and everything working but then if i'm on a touch device everything is just there nothing's hidden away and we don't have to worry about people not being able to get it so what does this mean it means somebody on a mobile device gets a great experience where they can see all the content and somebody who comes up on a desktop device or something else that has a pointer has a mouse then they get this cool little hover effect or you know they get a little bit more of an enjoyable experience a little micro interaction that goes on and just helps bring everything together a little bit but we still have one problem that is left and that is what happens if somebody doesn't want any animations going on um and this is quite common where people don't want to have an animation it's there's lots of different reasons why they might it could just be they prefer that way it could be that animations actually it's something that bothers them uh there's a lot of people parallax scrolling is just like they're out of there if they have parallax they're gone so we we want to if somebody's taking the time to disable um different if somebody is taking the time in their system settings to say that they don't like things moving around they don't like motion that means we should honor that so when you want to do a prefers reduce motion it's at media so once again another media aquarian prefers reduced motion and if you do this it's actually saying like if they don't like motion you can do that and there's also the choice of doing no preference and if we were going to refactor this completely i would probably put all the animations in here but one thing we can do and this is from andy bell's modern css reset so if somebody has taken the time to disable the um reduce prefers reduce motion they've disabled animations within their operating system we want to go on to reduce so they've they've chosen reduce again it's reduced or no preference so they've chosen reduce it's just saying choose everything uh make the animation duration super short the iteration count super short the duration really short and and all of these things important is on all of them so we don't have to worry about specificity it just works and if you want to test to make sure this is actually working if i come and i go into this is in windows settings you just look at animation it's going to highlight this for you in your settings uh there's also places in the mac obviously so if i turn off my animations in windows and i refresh my window here now see how everything just sort of happens everything is just sort of jumping up into place except for that underline notice that underline is just going across there so i'm actually going to modify this a little bit by doing star and we can also do star before and my star after just like that and now there we go everything sort of comes into place we could also just to fix it for this situation and this is up to you on how you want to do it but you could also come in here and do transition delay of zero and also put the important on there just because obviously it's a little weird that like each step is still happening one after the other so now everything uh and of course if you these you do need to put milliseconds and stuff on there we go so you can just have it like come up and come down um so we're you still have the thing that's hidden it's just at least we're not animating it it's just appearing or disappearing and of course with that you could also take the extra step at this point along the way of also instead of doing it the way we just did it now where everything is just set up the same way it was for our hover where everything is just there and there's no animation that even happens it's not popping up anything if you wanted to take that extra step as well now if you enjoyed this and learned something along the way you might really enjoy this video here where i cloned a card from pop dog that also involved a lot of fun animations and cool little challenges along the way as well and with that a really big thank you to my enablers of awesome zack and randy as well as all my other patrons for their monthly support 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: 254,793

Keywords: Kevin Powell, css, html, tutorial, css hover, css animation, css transition, web animation, web transition, hover effect, mobile hover effect, hover effect on mobile, web development, web development tutorial, card design, card ui, card html css, hover html, hover transition, hover animation, hover animation keyboard navigation, keyboard navigation

Id: 5DEq5cWNYt8

Length: 49min 12sec (2952 seconds)

Published: Wed Apr 28 2021