 I was poking around on dribble the other day and I came across this really fun design element by Ruslan Litbov and it looked really cool and I said, you know what, I want to see if I can figure out how to build that. So that's what we're going to be doing in this video. Hello my friend and friends and welcome back to yet another video. I'm so glad that you've come to join me once again. And if you're new here, my name is Kevin here, my channel, I help you fall madly deeply in love with CSS. And if I can't make you fall in love with it, I'm hoping to at least help you be a little bit less frustrated by it. And I think one of the best ways to push our skills and to get better things are finding things that challenge us a little bit. So we're going to be looking at that cool card layout with the shaky thing and all of that and adding the animations, the hover effect and a few different things. And this is part of an ongoing series that I'm doing where it's sort of no planning ahead of time. I jump in, I do it so you can see a little bit of my thought process, you can see issues I run into how I overcome those issues and all of that along the way. And yeah, I think it's going to be a really fun one. So let's jump right in. All right, so we're ready to get started. And I'm just starting with the basic boilerplate template here. If you're in VS code, just do an exclamation point, hit tab, and you're ready to go. If you're using a different editor, as long as you have emit installed, then you can do the same thing. We're just going to start with the basic layout of this. And I keep thinking of like grid, because I'm not going to do this bottom section, we're really going to focus on these cards. But even you can see like this would actually be like another grid thing, we could center that maybe these would actually have to get divided up a little bit more. But even here, like this would be another cell. I just think this looks like a grid type component. But once eating at me a little bit is the way the spacing is on this. I don't want to set a specific height on it. So I'm not actually sure the best way to approach this, but we're just going to do a, we'll just call it, I'm going to call it an offset card, card grid, I guess, just because we have offset cards and stuff, maybe not the best name, but that's what I'm going to call it naming stuff is hard. And that's just pretty much going to have a display grid on there and a little bit of other things setting up the grid itself. And then in there, we don't need too much. I'm just going to make one card for now. And then we'll sort of copy and paste it because the one individual card actually does have a lot going on because we need the card like this. But then we do also have like the expanded view of it. So we sort of need to handle both of those. And interestingly, I just noticed the font size doesn't look like it's changing. That's annoying. I was hoping I just assumed the whole thing zoomed in, but that's okay. That's okay. So let's take a look here. So we have the card itself. Maybe this card, it is a card type thing, but it does a little bit more. So maybe like, we'll call it fancy, fancy card, because it's not a normal card. It's a fancy card. And so we have my fancy card and in the card, we obviously we're going to need the title of it. So let's do that. We'll say it's an H2, just because there'd be other content, maybe it's an H3, whatever. But we'll say H2 for now. And we'll just do this one device device mockups. When we're looking at it in this view, we only see that we have the number that's there. And I'm, I have a few different ideas on how we could do the number. I think what I'm going to do is just a span with a fancy card number. And this we might actually be able to like programmatically get it to go up in number. But for now, I'm not super comfortable doing that. So we're just going to do like a forward slash with one in it. And that span, I am going to also come on this and actually put an area hidden equals true, just because I don't think it should actually be visible for area, like if there's a screen reader going through this, they in depending on how you set this up, maybe this is actually a list or whatever it is, but it doesn't need to like say the number, it would actually, you know, it's easier just to get we're on device mockups now and now we're on to the next thing and now we're on to the next thing. So I just think that it doesn't need to be exposed to screen readers personally, it's more of a decorative element. So this actually will give this class is going to be equal and normally I'd probably come in more heavy with a fancy card title, we'll go more BEM on this actually title. We will be using SAS, which I said in the intro, but it does make it a little bit easier to deal with the fancy card here. With nesting fancy card title, that should be okay. We have the arrow that's going to come in, I don't have an SVG for that yet. So isn't there, can we do an arrow HTML, arrow HTML entity? Do we have one that we could do? We could do that. We'll just come in with you. And again, I see this is a bit more of a decorative element, but let's just come in. So we'll say, I guess a span again is fine, just to have it there. And let's hit save. And actually, I don't even have this going, let's go take a look at what this is doing and what this is actually looking like. There we go. So yeah, nothing, nothing too fancy yet, as we would expect, but at least our arrow is coming in there. And so we get that, which actually looks a lot like the arrow that we want it to be. And again, on this, we'll do a class is equal to fancy card arrow. And we'll also do an area hidden is equal to true, because it doesn't need to be exposed to screen readers. The last thing we do need in here is also all those images, because when it does shake, actually, there's more than that. No, I think, okay, so when it does shake, we have these one, two, three, I don't think I have six. One, two, three, four, there's six, I might only have five images saved, but that's okay. Now, what I don't know for this, is it easiest just to throw the images here, or is it better to organize them differently? Like, should there be a parent? Or is the parent, I'm just going to throw my images here. So I'll do that. I've already got my images right now. So they're just in my image folder device one, whatever, a laptop with some code with VS, I think it's VS code anyway, VS code open. So there we go, we have the image and then, yeah, we need, oh, you know what, we're only going to make one of these cards work. I didn't save different images for all of them. I just realized that. So let's just duplicate this five times and we have my oh two, oh three, oh four, oh five. And obviously, all of these are going to need classes on them. So class will be equal to fancy card image. If you want to know for just placing the cursor like that, I just middle mouse click, and then you can drag up and down to place it in multiple places, or you can also hold Alt and then just click wherever you want to place your mouse and have multiple cursors that way. Cool. So I think that's about what we need for an individual card. And so let's hit save and go take a look just there. There we go. All of those images are coming in. Perfect. And yeah, so we should go to my CSS now, I guess. And so I am going to be using SAS as I mentioned, I set up like a whole bunch of stuff here, but I don't think I think I'm just going to use my main dot SCSS here. And we're just going to do this like the real old fashioned way. And so what we'll do is we'll do a SAS watch. And so yeah, we're going to keep the SAS very simple in this video. I just want to take advantage of nesting and maybe a couple of other little things along the way. So if you're new to SAS and you don't even know how to get it up and running at all in your system, I have talked about it in videos before. I'm not using the extension. I've heard that there's a new extension that can compile using Dart SAS, but I'm not going to stress too much about that just because this is so easy to do it this way. And I wouldn't be doing it through this way if I was working on a bigger project or anything anyway. There's other things we can do for that, which I've also talked about. There should be links and stuff if you're curious about SAS. So SAS watch, we're going to go into my SCSS folder. And actually, it's just come here. So we're going into the SCSS folder there. And then we're just going to go to my main dot SCSS. And I want to compile that just to my main dot CSS. And so you can see it's compiled it. And if we see here, it's created this main dot CSS file. So let's just make sure that that's actually working and that it's linked properly. So link CSS, hit tab, and then change that to my main. And let's go into my SCSS file now and just do body background is red. And if that's working, we should see there we go, we have a red background on my body now. I always like doing that early on when I'm working on something to make sure that it's actually connected. It's working properly because the amount of times where I'm debugging something only to find out there's a problem with the links between files drives me nuts a little bit. And I did say we weren't going to do too much sassy stuff here. But one thing I'm going to do is Andy Bell, modern CSS reset, which is the reset I use most of the time these days. And we'll copy that to clipboard. And I will come into my base here. And in my reset folder, let's just make this a little bigger while I'm doing this part in my reset folder. I'll file I'll say I'll paste this in. And by pasting that in there, then what I want to do is doing, will we do it? Okay, we'll do this a bit more the proper way. So I'm just going to come to my index here and do an app forward. And I'll explain this a little bit. We're going to add forward my, that was my reset reset. And so what forward's doing is it's going to take that it's going to go and grab that reset file, and it's going to suck it into this index and then spit it out where I want. So on my main here, then I can do an at use. And then here, we just have to go and say use my base. So it's a relative file path. So we're going from the main to the base folder. And then because this is the index, I don't need to write index, I just hit save. And it should work. And to see if it's actually working, let's just go look at my main dot CSS here. And you can see that it's actually brought in that reset to this file. So the other thing we can do here is if I go to my base, often here, you know, we'll set up some custom properties and stuff here. So I'm going to come back to here. And if you're on windows, I'd really strongly suggest windows power toys. It's how I do like my wind my snapping to regions. And if you do a windows shift C, you also get a color picker. And this color picker is fantastic. So here, let's get this dark color and you can see it pulls me up this color picker. And it gives you it in hex RGB and HSL, which is so cool. And so we can just do a, let's say, and you'll notice I'm using custom properties and not SAS variables just because I like custom properties. There are times that SAS variables can be better. But for the most part, custom properties are perfectly fine. So what do we want to do here? We want to bring in the, what do we call it? We'll call it color neutral. I like doing 900 is my darkest color. So we'll just do that. And I like using HSL. So we'll bring in the HSL value. We also have a, we'll do, I think there's three grays, color, neutral, there's, yeah, the border color looks like that medium gray that's on there. This looks like I got the border color there. So we'll call that one my color neutral 400, which is sort of like middle ground. And the last one we'll do for that is my color neutral 100, which is the background color that's here, this white color, it's off white as you can see. So we'll grab that, put that in. Let's zoom back out here. And we have a color primary, which is the red, which I think is that one, but let's grab it again. It's probably the same as this, which just makes it, not sure. I'm assuming that must be the same color. We'll go with this one. And bring that in. And so we have our white, we have our black, we have our gray. I think that's all we need for the colors. My font family, we don't really need one because it's all one font. I'm just going to, I'm not even going to try and match the font, not focused on that colors we have, I think we're good on sizes and stuff. We're not too worried about for this individual thing, even though this obviously could be built out into something bigger. So we have all that. So we just have to make sure on my index here, we're also going to do a at forward of the root. The order they're put in here is the order they're going to get spit out in. It doesn't really matter at the end of the day, but I do like having my custom properties as the first thing in my CSS file just because it's how I like to work. So we have my colors. Yeah, I guess we can start actually writing something. So I'll go into my components folder and let's just make a index.scss and we'll make a card. Well, we'll just call it fancy cards, fancy, fancy cards.scss. I'm not going to overthink this one a little bit at forward. Fancy cards. And when I say I'm not going to overthink it, it's because what I'm thinking of here, let's just do our components. I'm going to put the grid and everything here, even though just for simplicity sake, and it's we're only building it one thing. So and you might be saying, well, why are we even using sass if we're just building this out? But whatever, I figured, you know, let's get a little bit more interesting with these videos. So if I'm going to do the whole grid, I'm just thinking, should I just do the card? I want to do the grid because the grid is interesting me. So I think what I'm actually let's call this fancy card grid, just so we can stick with that naming copy, paste, paste, paste four cards. We need to number them one, two, I'll do this fast and I'll see you in a second. Alrighty, so that's done. I have all my HTML in place now. So we actually have a whole bunch of cards coming in that are there. And what we'll do is let's go to my fancy cards, and we're going to start by doing, we'll just make our fancy cards card. We're going to need two things here, and we have my fancy cards grid. And on my fancy cards, I am just going to come in here and do image and do display none for now, just because I don't want them getting in our way, while we do the rest of it, because we're going to be positioning them and doing stuff with them. So just it's going to help me actually get the rest of this layout done first. Cool. So on the fancy card itself is, and this is just nesting. If you're not, if you're used to regular CSS, this would be the same as just doing dot fancy card, I am G like that and selecting it here. Just with because I have the fancy card, actually, we did give that a class, but we'll come back to that. This is just very temporary. So fancy card grid is going to be a display of grid, which I think is makes sense. And then a grid template columns, repeat for one FR that should give me grid template columns, fancy cards grid, did I call it fancy card grid? I did. There we go. Okay. I was like, where's my, my columns and actually this is zoomed out for some reason. There we go. Let's do that. I know I didn't set it here, but we're just going to do a few things on the body. Just for my font family, we'll just do the system system UI comma saw Sarah as a very generic font stack. And yeah, that I don't, I guess we can do a few things here that I usually do line height of 1.5, even though actually that might get in our way more than anything, but whatever. But we don't need too much for this one. Okay. So we're going to do that. We just have to make sure we're actually importing that. So after my reset, I can bring that in. So that's my base. And there we go. Okay, that looks a little bit better. And here, one last thing actually, we'll just do an H1 H2 H3 font weight of 400. Just so we don't, you know, these aren't bold. So we'll make them not bold. And now we can get going. Cool. So we're, we're sort of set up. We're ready to start actually making these come to life a little bit. So I definitely, I definitely for this to work, I'm going to need three columns, a three rows, I mean, so I'm going to do a grid template rows. And what I, I'm not actually going to make any rows. I want to see if I can do this without making them. And if we need them, we'll make them as we go. So my regular fancy card, what do we need? There's a few things on here. We have some padding. And it looks like there's more. Ooh, you know what, the design here, I'm going to say that the spacing here is equal, just because you can see the spacing here is the same. And then this one's offset a little more. So we're going to say padding of one rem on all the sides. And then we're going to say it's a display flex. Now we'll do a display grid. Oh, yeah, that should be fine. That should be okay. We have a border on them. Border is one pixel solid var color neutral 400. There's a gap on my grid, gap of one rem. The gap, of course, should be over here. There we go. So that spaces them out. Let's normally on this, I wouldn't do this, this is like just for the demo. And on this, I'm just going to do a margin of, I don't know, six ram auto, just so it's not stuck to the top of the screen. And we'll give this a width of, we'll do a calc, or you know what, we'll do this as a width. We'll use a Mac. Use the smaller of these two values of 100% minus two rem comma five comma, how wide should we get 60 rem display grid? Oh, you need a semi colon at the end there. There we go. And what that does is it sets like a maximum size, maybe a 70 would actually be better. And then so what that's doing is the margin auto here is centering it. And this is saying choose the smaller of these two values, 100% minus two rem, which just means it's, it's never going to touch the side. So if we go in responsive mode here, we can, when we shrink this down, you'll see it never actually touches the side because you have one rem on each side, because it's 100% minus two rem. And so the width of it does that. And I'm not making it responsive now. I know that could be a fun like stretch goal or something. I'm not doing mobile first, which I always advocate for, just because I'm trying to, you know, focus on the things that I think are more interesting in this design. So that's why we're doing it this way. And the last thing here, I did the border like that, but we're also going to come on these and say border bottom is maybe like a five pixel solid var primary. Did I give it a number? I didn't. Usually I do. That actually looks pretty good. Just thought of one thing, the body has a background color to background, background, var color neutral, and should be 100, right? There we go. That looks much, much better. My border is definitely too dark. So maybe we, you know, that's actually a lighter gray that's on these borders. So we'll have to fix that up eventually. But for now it's getting there. So I think what I'm going to do on these fancy cards, we're going to do, I don't know if I don't know if this is the best way, but we're going to try. I'm hoping this works. So on the fancy card, let's do a aspect ratio of one over point 75. Cool, that is working. So that's even maybe like, so this is the width and height ratio. So one and then it's like half as tall. So I am just sort of coming up with a magic number now to try and find something that works. That actually looks not too bad. So I'm kind of happy with that. And we're the arrow, we're going to turn off the arrow too. So that and my dot fancy and arrow. There we go. So the arrow should be hidden for now. I guess we'll position that one. My titles, I'm going to try something. So we're going to do ampersand title and the ampersand with flex with sass is just taking like dot fancy card here, fancy card. So anytime you do that, if you're just writing regular CSS and it's not nested, just take the ampersand away and put whatever the parent is that it's nested inside of. And so for the title, I'm going to do the font size looks a bit bigger. So font size could be like three REM, probably too big, 2.25 REM, two REM. The font weight looks a little bit more, but I think like a font weight at system UI, maybe I can actually do like a 600 or 500. Do I have that with my system UI? That looks a little closer. Okay. Is that the same as 700? No, it's not cool. So we'll do the 600. I don't know. It's a system UI. So you never really know. But whatever, line height of one. And now I want to get it two things. One of them, like notice that it's always one, one word on per line. So like, let's try this. I don't know if it's going to muck up the UI UX tools one or not. I think we'll be okay though, it might muck it up. But we're going to do a width of min content. Oh, there we go. Yes. If you want to know more about that, I've talked about min content, max content and fit content in another video. There should be a card popping up or a link in the description. Okay. Now these are display grid. And the reason I did that is so on these, I could also come into a margin top of auto, which should push it down. Cool. That worked. That's the title. We have the span that came first. So that's my end. What did I call that thing? And I forget what I called them. Arrow, number, number. So that makes sense. And number could be counter to, I guess, but whatever number. So on this, we'll do a mark. There's text a lot text align, right? Let's keep it simple. Color is my var. Color primary. And we'll do the same thing I did before of a width of min content. And just like that. Oh, but that width means the text align doesn't work because now the width of it is actually what we see here, which is fine. I just need to not use the text align then and we can just do a margin left of auto. Ha, there we go. Okay. Perfect. So that's good. And actually, like this looks pretty close other than the font being different. Now what I want to do is get these guys that are different sizes. So for that, realistically, a utility class could be better. But let's just, we're going to come fancy card, we're gonna have like a modifier class here. Whoops. We're gonna have a modifier class on here instead, I think. So I'm going to say and fancy card large. And the aspect ratio aspect ratio will be one over one, because those look like perfect squares to me. And so if I do that, there is my first card. So my second card will do a fancy, fancy card, large. Cool, right? So we have two large ones, and then a fancy card, large. Nice. Now, so this one's actually perfect. It's this one that needs to move up. That sort of frustrates me that they're good other than that in a way. Because I am okay, large and let's do fancy, fancy card offset. See, this is going to be annoying, though, because if I do create like a whole set of like an extra row here, so I could use a transform and just pull it up. The problem with that is if you had other content around, like it's just going into empty space and it could overlap stuff or it could ruin stuff. And like ideally, like as you can see, like this is part, like I think this would actually be a bigger grid. And so we do want this to be like empty, an empty row basically. Oh, okay, we could actually, yes. So that should work. Okay, then, because what I could say is all my fancy cards are grid column grid row two, which shouldn't actually change anything right now. grid row two is fine. And then if we have my and offset, it would be a grid row of one span one over one span two. Okay, that worked but not by as much as it's working. Okay, let's look at my grid because I don't understand. I'm glad it worked. So let's turn on the grid. fancy card grid is there. Wait, there's what? Oh, I get it. Okay, so you don't see it here, but we have like a line one and a line two are basically overlapping each other because there's not I didn't want to have to like tell it how big to make this. I was just hoping but it's spanning. Is there a grid auto flow that could be good to put on this? I know auto call auto rows, grid auto rows of like, this could, I mean, that's going to work. That's obviously too much. But like how so I could do that and obviously it's working but like then the alignment of everything goes off and it's not quite what I was hoping for. I want the first row. So my idea so I was really hoping by pulling that one up into that other row that it would just sort of take up enough room in that let's turn that off again. Oh, wait, wait, wait, let's try one. Okay, so if I if we didn't do that whole weird thing, they were all lined up together. No, they were both sticking out the bottom because these just happened to be taller than those, which looked good with this one, but it might actually be a little bit of what's causing this to be a problem. So I'm going to do an offset up. This is getting more complicated than I thought, and we're just on the grid. We haven't even got to the fun part of the hover yet. So that's my fancy card there. So here my offset up. It shouldn't even be a grid row one ideally, whatever, I'm going to we'll stick with this for now and then and and and offset down will be a grid row span to and did I do an up on both I did down to over span to to over span to that did fix it. Okay, good. What I don't like with this is these hard coded values that I've had to put in. But I don't really know of a way to overcome that, to be honest with you. And this is something that would make me think this would actually be there might maybe there is a way if you know a way to overcome this and have to do this. I'll explain why this worked in a second. But if you know a way to overcome this and make it a little bit more dynamic, leave a comment down below, I'd love to know. But this is somewhere where maybe a sub grid would actually be really nice, because you could have the parent grid, which is setting up an entire grid that you could use, and then you could have a sub grid living on here and some grids coming, it's going to be here, but we don't have it quite yet. So outside of Firefox. So for now, this I think would work and then you'd have all these other elements on like the same grandparent grid. But then anyway, sub grid's going to come to look at why that worked. Now, when I when I set that up a little bit differently is if we go look at the grid now, before what was happening is this was on like a span two. But basically, okay, this guy here wasn't spanning anything. This was the problem was this guy, because he wasn't spanning anything, it was making this row of content be the height of this card. So that that was a really tall space it had. Because I've now said this is spanning two columns, it's these are the only ones that are spanning only one column. And because they're only spanning one column, these ones are the ones that become the boss, these are the ones that now are like, okay, this is defining the height of this column, or this row, I mean. So this this card and this card are defining the height of this row. And then because this is spanning to anything that's bigger than that on this one is sticking up because of how I set up the rows and columns. And then on this one, anything that is bigger, it's spanning down. So it's sticking downward. So that's basically how that's working. Yeah, cool. I'm happy that that worked. Good. I'm actually really happy that that worked and a little bit surprised. But look at that. I think I think we're pretty close to the design that we were after there. I'm really happy with that. So now we get to get into the fun part of making it grow on hover. We have the shadow that we need to do, and then obviously the shaking animation and the stuff coming out of it. Cool. Okay. So the first thing I'm actually going to do is on all of these cards, I didn't think of it, but the whole thing looks clickable. So let's come in on all of these. Each one would be, I'm just thinking like, is this even just an a href? I don't have anywhere for it to go, but we could do that where the entire card is just a link. Or you have the div. And you're allowed, I've had people comment in the past about this, just placing different things in links. In the old days, it was very limited what you could place in a link, but with the new spec on links, you can, and it's not that new. It's been a long time. You can put basically anything you want inside a link now. So we could do that and just make the entire thing a link. Because I'm assuming that's sort of what it would do, or the whole thing is a button because it's opening. I don't know what it's actually doing or what like the effect should be. So if we do it that way, I would just do, let's just come to fancy card. So here we could do a text declaration of none and a color of inherit. And it goes back to what it used to look like. So I do actually think that sort of makes sense, just making each one of these a link. I think if somebody thinks it'd be better to nest the link inside, let me know. But basically, this would just get your fancy. So it's a link with effectively the text of branding mockups is how I see it. So yeah, I think that's okay from a semantic point of view and everything else. But if you have other opinions, let me know in the comments as well. Yeah. Okay, so with that, then the nice thing with that is for free. Oops, let's just come here and save those. Oh, that one's good. This should all be good. I was wondering why I didn't have a hover effect like the hand icon. But if you do have an href or an amine, it's not a valid a until there's an href on there. So that's why we usually just put that placeholder in there just so you know, when you're working on it, you have something for it to actually think that it's going to do something. Okay. And again, I'm assuming this is bringing us to another page, which is I am saying link, if it was going to open a modal or do something interactive, then a button would work. But there we go. So that's good. Now we want to do our hover effect. So let's come all the way down. We'll come here because again, these these will get changed shortly. Yes. And we'll do it and hover and focus focus. Focus should be fine. Yeah, focus should be fine. When you tab through, I was thinking it should be focus or focus visible, but I don't think it makes a difference in this case. So the background will become my var color, neutral, neutral 900, which is the black. So if we go and look that should, there we go, we see it changing. Now I also want those to change, which would mean on hover and and focus the dot card, fancy card title, and I can't use the the ampersand in here. Just because it would grab this entire thing as the parent, which wouldn't work. So you do actually have to type it out in this case. And then color would be my var color, neutral 100, I think should work. Yeah, there we go. Okay, perfect. I'm not worried about the transitions yet, but we're doing that. We also want it to get bigger, right? So here we're going to do a transform of a scale scale, we'll just take 1.25 because it gets pretty big. That actually looks pretty good, I think. Maybe it's a bit bigger 1.35. I'm just looking at how it's crossing the S there. That looks pretty much bang on. Oh, the border goes away on the bottom. So border zero, just turn the border off. Perfect. Okay, so that's good. And now obviously, we'll do the transitions after we have the shadow that comes in. Now if you want to do this shadow is animated, right? So when we have around there, the shadow comes in and moves and there's way it's not the end of the world, but it is one of the more expensive things that you can do. It's a really nice shadow. But I think I don't think I need any pseudo elements on here. So what we're going to do is we're actually going to come on here. And let's come here. We're going to do an ampersand before. Now we'll do an after just so it's before. Yeah, I think this did a position it properly. Whatever, it doesn't matter. Content is going to be that. And so we have my content of nothing. The position position should be absolute absolute. And that means if we come up to my fancy card itself, let's just throw my CSS is such a mess right now position of relative. Sorry about that. The ordering in here is really need to be cleaned up a little bit. So position absolute, inset of zero, which is top bottom left and right of zero. And let's do a box shadow, not box sizing box shadow. And it looks so let's just do a zero zero. It looks pretty blurry three rem and we'll use my bar. Let's just do an RGB of zero. You know what a nice thing with SAS with SAS, you can do black and then black, you got to write the right thing and then like a point one, you know, it works. And you can actually see the drop shadow on there is working. The thing is I want to take this before and let's I'm going to make this instead of point one. I'm going to make it one just so we can really see that the shadows are on there. And what we're going to do is turn the opacity on this opacity of zero. And when we hover the fancy so dot fancy card before. No, actually, in this case, we do want to do the ampersand because it's directly like this is where it's being applied to. It's not something nested inside and we'll just do an opacity of one. So when I hover, you can see that the shadow gets turned on. So the nice thing with doing it this way is you're just animating opacities and we're going to do it transform on it as well. So if we look here, it's really like offset that way. So we'll do a transform translate and let's just do 50% 50% because it does look quite a bit. Whoopsie doodles. Oh, didn't think of that. Okay, that's fine. I know a solution. This being negative 50%. There we go. So it's in the right spot. I didn't think of that problem though, but I'm happy it came up. So basically the box shadow is doing a shadow on the box itself. And I've never tried this. We're going to try one thing. I don't think it's actually going to work, but let's just write background. It already is. Isn't it transparent? Yeah, it already was. Okay. So instead of a box shadow, what we're going to do on here is a background of black and a filter of blur and let's just try 3M. And there we go. Cool, right? So when we do that, it will go like that. It looks like it's on top of my card because it can't read the text. So let's just throw a Z index of negative one on there, which should pull it to the back of everything. Good. And now we just need to soften it up. I was going to make it not black, but because we already are displaying with opacity, we can just make the opacity here like 8.2. So we get that shadow effect. I think my blur is too much too. Let's bring that down to 2, bring this up to like a 0.4. The coloring is not perfect, but I think it's pretty good. So now let's add in. We're going to come all the way back up to the parent here, so right on the fancy grid itself. And we're going to do a transition on here of transform. Transform. We'll say it's, I don't know, how fast does this go? We're going to have, okay, I just thought of something, but anyway, we'll see if this, okay. What happens when we come off? Okay, good. The animation is only when we hover. That's good. So when we go on, there we go on, it grows. We have the arrow to do two Gs. Okay, transform. It's pretty fast. 350 milliseconds and we'll do an ease. So we're running into some Z index issues here as well, which is fine. See the borders like cutting through from that other one? That's okay though. So we can see that that's coming up. I'm just looking at the example. Okay, one, two, three. That's pretty good. I'm pretty happy with that. Okay, so the other thing, so that just means here when we hover on this, the hover, where's my hover? We have a position, we have a position of relative on here. So I should be able to do is Z index of 10, which means when I hover, it's not going behind the other, the next element that's on there. Oh, we're getting some overflow because of the scaling on there, but that's whatever. Okay, so the other thing here is on the before and after. We're transforming the scale. So here, this is my and before and before. Here we go. Trans, transition, transform, 350, we want the same thing, 350 milliseconds ease. So the shadow is transitioning at the same time. So you'll notice it's transitioning this way, but not transitioning when we go off. Oh, wait, let me see their animation here. Oh, yeah, that should be okay. Let's just come up to here. You can do the all and then it transitions everything, right? So like the colors are, yeah, I think the color transition there is fine. But what I'm actually going to do, yeah, okay, I want to make this a little bit nicer. So we're going to do a transition of my transform transform. And we're going to we're going to do multiple transitions. So you can just break this off onto multiple lines to make it easier, because I also want to do my background color 350 350 milliseconds ease. And I want my color at 350 350 milliseconds ease. Now you're saying this is exactly the same thing that we had. Don't forget your commas and prettier might take that off. But so we're basically left where we were. But I actually want to take this transition. I'm going to put that transition on the hover that I have here. Because what that means that I can do is, well, now it's identical to what we had. It looks like I need to fix my Z indexing again. But that's okay. Why is it? Hmm, that's weird. Oh, it's the background is transparent normally. So I'm going to fix my background color. So we'll do that to color. And what I mean here, like see when I come off, you can see that other cards start to show up through it. So it's because the background is actually going to transparent color, blue here background color is my bar 100. So that should solve that issue because now it doesn't do it does that weird jump though. Okay, I know a fix for that too. It's just because when I take it off, it's now jumping behind because the Z index is changing again. Okay, that's fine. There is a way to deal with that. I just remember what it is. It's kind of awkward right now. Okay, but whatever we have that the shadow is actually looking really good. But the shadow, why doesn't the shadow transition the other way? Did I put the transition? I put it on my before. Let's just put a starting point then for my transform because it could be to deal with that even though it looks like it's starting in the right spot. So, but we'll try that out and just see if having this on there fixes the shadow problem. Oh, I might know why. Now this is always there. Oh, the opacity is not transitioning. Okay, that's fine. So again, same idea. We can transition my opacity for 350 milliseconds ease. And that way, there we go. Okay, that fixes that at least with the shadow. Good. So that's actually really good. Now, I don't actually mind that the text, the font size is getting bigger. Okay, so you notice here when it shrinks, I just want to see when he takes his mouse off, maybe the color changing is actually okay. And I was overthinking it because I was thinking that we could leave the black on until it's all the way back into position. Which is why I was giving me, yeah, I don't think we need to do that because that my idea was that it would grow, then it would shrink back and then change color. But I don't think that's what's actually happening. I'm just switching tabs here. So I don't have to keep watching that animation. So let's just, I want to just see if I do all here. I just want to see if it mucks up my Z index is still busted. So basically, yeah, I'm going to leave all of these here with the transform. But we're going to come in and do one more transition here, which is actually going to be Z index and Z index is something you can't actually transition. But we're going to the Z index of 10, I think I put right. But the problem is as soon as I come off from hovering, it's no longer at 10, it's instantly going down to zero. And what I actually want to do is make that delay. So I'm going to do the time doesn't matter. So we need like a zero millisecond animation. But I'm going to put in a 400 millisecond delay. And we'll just say linear, because it doesn't really matter. And so now the, so the animation duration doesn't matter. But the delay, it's going to change the Z index after 400 milliseconds, which is after, you know, what this could even be 350. And this would be a nice place maybe for a, either a custom property or a SAS variable, just so you're not repeating yourself if ever you wanted to change your time. Still, oh, it's not working. But I think if we actually declare a Z index, like we had before with that other issue with our transform, there we go. Perfect. So yeah, you just want to have the Z index change after a certain amount of time. So as the animation finishes, the Z index is then changed. One thing you'll notice is we do obviously need to actually put an animation on this, but I haven't put in an animation for the including the growing and everything else, just because I find like there's too many variables, whereas here, like the hover is just controlling right now this one thing. And then the animation itself is just going to be the shake. And I think we'll do the shake and maybe the children coming out potentially all as part of the same animation. Let's fix our arrow up first though, and we'll get the arrow working and then we'll see about that shaking. So the arrow was let's go all the way down and my and arrow of a display none. So instead of that for the arrow, let's just come back up. So it's I'm coming up just because here's my before my after all of those other things. So here's my title will come here. And we'll say and arrow position absolute. And I'm just doing this position absolute because I want to pull it out of the flow a little bit. I didn't set up like a grid here within my markup. I just have this arrow that's floating around. So I just think this is going to be a lot easier. The parent is already positioned relative. So I can do absolute and then do an inset. So we're starting at the top auto. If you don't know about inset, I have a link of video in the description that goes a bit more. But basically my top is auto, which means don't worry about it. My right will be one ram. My bottom will be run ram and my left will be auto. My images came back. Why did my images come back? Oh, whoops, display none. There we go. And now the arrow is in. Cool. And this is somewhere you could make this a little bit better or more maintainable. We might actually have to do that with these durations as well. But you can make this arrow a little bit more maintainable because you could link this rem here that sizing to the padding that's on the card because this is one ram. So like I could do this as my say a custom property of padding. Then here I could do that as my var padding. Save. So that's exactly the same. But then I could come and replace these both with my var padding. And the advantage of doing that is if ever so now if I have that with that custom property, the cool thing is you come in here and you change your padding on the element. So this becomes two because the design changes, that's going to shift that arrow shifts along with it. So it just helps keep things a little bit more consistent. We'll put that back down to one. Because I did it as an HTML entity, to put that arrow in there, we can just come in on here and choose a font size of two ram and color of var color primary. My positioning actually looks a little bit off and I guess I got a little bit too clever. I'm just going to .5 ram. I guess my idea there didn't actually work and I think it's just because it's a font, it renders a little differently. So okay, not perfect but good enough. At least this side will automatically update. And of course you could do like a calc on that with your padding and then okay, I'm talking about it, we might as well do it. So calc of var padding divided padding divided by four. So again, now at least it's consistent when you update it. My arrow looks a little bit different. It'd probably be an SVG normally and you can just position it exactly where you want. But good. Now we'll just do an opacity. We'll do the opacity after just because if we come and look at the animation, it comes in. Let's just look at the arrow. It sort of slides in that way. So it's obviously easier if you can actually see the arrow when you do your animation. Whoops, let's bring this up. There we go. Okay, so I want to see the arrow while this happens. So I think the easiest thing is actually just to set things off a little differently at the top. So transform, translate, we'll just do a translate x because it's the only one that matters negative 50% maybe. And then when we hover over here the hover on the parent my fancy, fancy card arrow, we will get a transform x of zero and of course that should be a transform. I always do this. Translate x would probably help a little bit. So when we do that and I might have mucked it up up here, did I? When I did, I always transform, translate x negative 50. I just want to see is that moving it? It is moving it. That's my and arrow. Yeah, double underscore arrow, fancy card arrow. When I hover, so there we go. It's, you can see it's, we have a little, oh, look at that. When I go on the shadow because the shadow is part of it, it's including that. So what we can do on that actually is on the before, we can just throw a pointer events of none on that. So it doesn't record when the mouse is on top of that. So now it works a bit more as expected. It's more of a decorational element that's not actually part of the element itself. So now my arrow is moving over, which is perfect. We'll just transition that. So and arrow, transition, transform, 350 milliseconds ease in. So now when we hover, it slides over. And then we also will want the opacity here. Opacity, opacity to be zero. You'll notice I'm only transition transitioning what I need to be transitioning. It's just to have it that I have, but trans for not that opacity, opacity of 350 milliseconds ease in or whatever linear for that. If you're always doing the same this thing, this part, and just changing the properties, you could say this is a custom property. But if you're always doing the same, like say you have a cubic bezier here, and you don't want to have to repeat it, you could do like a custom property, and you could have three, right? You could have animation duration and do 350. I'm doing it here, not the root, but we could put it wherever you need animation. What's it called timing function? So timing or just let's put function to make it easier function and ease in for whatever, but say it's a cubic bezier or whatever, and then you could have like your animation props for properties, and then do var, and actually like bring both of those into here and have both because you can store whatever you want in a custom property. So you could store both of those into your custom property, and then you're just bringing this one back in whenever you need it. I'm not going to do that for this, but yeah, just as an idea. And so we have that, we have my opacity on there, just prettier on wrapping. So just means over here, the fancy card arrow also gets an opacity of one. So now when we go, it comes in and goes out. And actually, if I look at this, it looks a little different, doesn't it? It's a lot faster. Okay, so this one's actually going to be a different duration on there. My arrow can be like a 200 maybe. And that the opacity probably would want to be the same thing 200. Yeah, that looks more that looks more in tune with what we had. There we go. Perfect. Cool. I'm actually really happy. Whoa, whoa, weird. Oh, you know, I didn't think of that. So it's only problematic if you go this way and not if you go that way. Okay, we'll have to figure that one out. I have a few different ideas on how we can fix that. So it's fine if you do one card. But when you jump between them because there's that delay on the Z index changing. Is it that way's fine? It's that way that's the issue. I'll have to think about that one. Okay. But yeah, let's get the shaking animation in. So I'm just going to come all the way down. And let's do an at key frames of shake. Yeah, at key frame shake, and we'll do it 25%. I'm not doing a 0%. 0% is going to be like the resting state. Because at the beginning, there's nothing, then it's going to shake, and then it's going to be back to nothing. So 25, we're just going to need a whole bunch of these, but we'll let's just try doing like three, and then I'll probably speed it up to come in with more. So transform, rotate of 10 degrees, like degrees don't do big ones. Let's just do that 50 and 75. For now, we'll add in some in-betweens after. So this could just go to negative 10, and then positive 10. That's even that's going to be too much. Five. And even five might be a lot. It doesn't look like a lot. So this is on my hover and focus. We do want it to do this now. So we come on these, and we're going to say animation of shake. How long? It's not very long. Let's do, I don't know, 500 milliseconds linear. And let's just see if it works. So yeah, you can see it's working. It's doing its little shake, but it's doing the shake as it's getting bigger, which we don't want. But we know my animation is 350 milliseconds, so we can add delay on there. So let's just do that animation delay of we'll say 500 milliseconds. So it should go up. Whoa, something funky is happening. Oh, yeah. Okay. That's happening because the we're doing a transform on it. So basically it's coming up. Then the transform comes in and this transform is overriding the scale that we've already done. So on all of these, each one of them, we're are going to have to also have a scale of one point. I don't remember what we did. What did I do my scale at 1.35? And again, a custom property or a SAS variable could be useful there. Oh, no. So do I need to put in a 0% I thought if you didn't have a 0% it would be fine. But the animation actually doesn't look too bad. Okay, let's do a 0% of just this. What? Why is it jumping? Going? So I really have no idea why it's doing that. So I'm going to open up my dev tools. This is in Firefox, but there is an animation inspector type thing in Chrome as well. The Firefox one, just when you're regular layout, it's under animations. And it says like find something. So you just take your little this thing and just click on it and it will get your animation. Now it tries to save the animation. So you can see like here it's gone through all the animations and stuff. But what I'm actually going to do, yeah, we have the right thing selected. So there we let it do the animation and then come off. Let's try it again. And then off. So what it's doing is it's actually like we can go through and look at the animations that it did. So let's just do go on shake. Okay, what if I if I'm on here, can I add the hover? There we go. Okay, because this is what I want to keep is why. Oh, see, it's it's mucking things up here though. Because that's not what's happening. Oh, my goodness. Here it looks good. Look, it's it's well growing. Let's I'm going to open this up in Chrome actually and see if we can get a better one in Chrome. So yeah, this is in Chrome now. Let's go see if this is going to help us out. Oh, look, it's working in Chrome. We have the Z index issue. I don't have that weird jumping issue. One second refresh. Ooh, Firefox is giving me an issue that Chrome's not giving me. Okay, what I'm going to do for now let's fix it. Let's fix the I'm going to we're switching over to Chrome for a minute because I'm happier. So I'm actually going to add in like a couple of these. One, two, this could be at, say, 4050. This could be like a negative two. Then at 60, it goes to maybe that'd be a pot. So five to negative five to two to five to negative two. Let's see what that looks like. I sort of like that that it speeds up a little bit. So it's like, I like how that is it doesn't match exactly what theirs was, but I think it actually looks pretty good with how it's working overall. So I'm going to leave it like that. I think that's pretty good. Cool, I'm happy with that. Now we want those images to actually show up. So for the images and this is where things are going to get a little bit weird, I think what I need to decide, there's, yeah, okay, so for the images, display none isn't going to be on these images, it's going to be my and image is what I called it. And we're going to do a position of absolute on them. And a Z index of negative one. So they go behind. That didn't work. Why are they not behind is that index? Because they're in my parent and my parent has a stacking context so they can't escape out of that stacking context. Oh man, I know how I can fix it. I just don't want to have to do it. Okay, top zero, I'll do a bottom zero bottom zero. And we're going to do a width of 50%. I think because they need to be smaller, maybe that's too small 70%. That will do now. Oh my goodness. Oh, that Z index thing is really bothering me. Okay, so we can do that by let's come all the way back up. Instead of the background actually being on the card itself, because what's happened now is I've set a Z index and a position relative on the card itself, which is creating a stacking context. And because it has its own stacking context, the children inside of the fancy card can't escape out of that. So the negative one is layered within the card and it can't go behind the card that it's inside of. This is often a good thing. But here I want these images to go below. You could probably do it with like net like apparent div and then sort of more of a content div. But in this case, I could do it with an after. So we're just going to keep I'm just going to steal these from here. All three of these. All four of these. No, all three of these. Okay. Because what we're going to do is we're going to say an and before comma and after. And then we want to and paste that in there. So okay, then oh, that's gonna be a problem. Anyway, we'll fix that. Just any of the chill, the images are sticking out the top on here. I will do the background of our color neutral 100. Maybe you see where I'm going with this now. And then on here we do a Zed. Oh, no, I don't this. This one would go only on my after so and after. So the after would actually make more sense as the shadow maybe in this case, but whatever. It won't matter at the end of the day. And so Zed Zed index will be a negative five. So yeah, negative two, I just want to say there's a few weird things happening now. Oh my goodness, why is the borders doing that too? Oh, the borders turning off. And then this is staying. Right, right, right, right, right, right. Okay, so there's that. And then we're going to do transition of background color 350 350 milliseconds ease because instead and then then this is getting complicated for anyway, after background color becomes my color neutral 900, which is my black. And now there we go. Okay. How come this way? What's kind of annoying? Okay, so now let's go see there. That's my so this is the shadow is negative one. The shadow should actually be all the way in the back. So we'll throw a negative three on the shadow and negative two on the background color now. So that background color is my shadow is the after. And then my images should be Oh, you know what, this will be a negative two. And then this one will be a negative one because that's the background color. There we go. So now we can't see the images. Perfect. That's exactly what I wanted. Good, good, good. Another thing. So the image be some of the images are tall. Uh, so width. So actually, I think what we'll do is set this instead of a width, we'll do a max width of 70% and a max height of 70%, which I think won't cause any weird stuff to happen. Yeah, I think that won't cause any weird stuff to happen over there. So the idea now is the background color on the card isn't from the card itself. The background color is that pseudo element. So we have the background color is one pseudo element. The shadow is another pseudo element. And then in between those two, because of the Z indexes, we now have my images. So the images should stay on top of the shadow. Now for the images, we want to add an animation to them. And this is where right doing, do we want an animation? Let me have to figure out if this is me an animation or a transition. So let's go look again here. They all just sort of, they wrote the transition though. I don't need to, I was thinking I'd do an animation on them, but I don't think I need an animation on those. I could just do that as a transition. So this whole image, I'm actually going to take and move it up within my sassy stuff here to go right here. So I have my arrow and then I have my images just to keep like all the individual nested components together. And then I get into these offsets, then I get into the pseudo elements, and then I get into the hovers. And then so we have my title, my arrow, let's turn off that animation because it's not fun to watch it. And let's come over to my here, we're going to do my dot fancy card image. We might, I'm just going to get like image, they're all just going to show up on one side, and then we'll figure out the easiest way to actually get them all to do their own thing. So there will be a transform, we'll do a rotate of 10 degrees, and a transform translate I mean translate of 20%, 20%. It needs to be more than that, but I just want to see if this even works. Hmm, that's not working at all transform, rotate, that should be working. Let's go see in my dev tools, because the nice thing with the dev tools, even if you can't see something, no fancy card image. So there's the image, so we can see where the image is. And then if I go in my dev tools, if I go on this, and then we can go to the hover state, and we can do a focus or active. We can do a hover. So the card is being hovered on. And now my image hasn't moved. And the image isn't moving because my CSS is invalid. Transform, what's invalid? Translate needs commas is what's invalid. There they are. So I'm just going to refresh to get rid of that hover state. So they pop out like that. So as I said, maybe a 50% on these would be fine. Yeah, that's a bit better. They're all going together now. But so they're going to sort of do that. So I was thinking of doing it with a SAS loop. I think it could probably be done, but I'm not good enough at math to actually be able to do it. So let's just come in here and say fancy card image. And we're just going to do it the old fashioned way. So nth child one to select the first one. And so when we hover, it's going to move that way. So we're going to do a transform X. We're going to do transform. Yeah, transform and trans. I was doing a transform X Kevin. Translate. I told you I always mix them up. The trans beginning to both of them, it just messes with my brain. Let's just do 100% comma 20% and just see where that puts it. It's not putting it anywhere, but I should be when when we're I'm just going to my dev tools, we go to hover and say when we hover on this hover, the image. Oh, I did child. It's not the first child. It's nth of type one. Ah, there it is. Okay, that's better. So let's do 200. So like 150. And I don't like necessarily hard coding these values in. So maybe there's a better way of doing this. But negative 10 maybe. So it's up there. Okay, so that's that finish state plus we'll do a rotate on here. Rotate, rotate of like 10 degrees. That's okay. Then we can just duplicate that line. This one becomes two. And this will be say 120%. And a negative 50%. No, not we want like a 50%. It's going to stick down. That's not bad. Then we can just duplicate you. This is the third one. So it's going to come down now. Let's move this that way. And you know what this I guess could be like a negative 10, just to do that this one 10 makes sense. Now we want this to be more like 50% over and 70% down maybe. So it's further. This could even be like a 20. This could be like a 90. There we go. That's not bad. Maybe even a zero here. Yeah. And this could be like a five. Cool. I'm happy with where that one's at. Number four. Whoops. Number four. This part's actually easier than I thought it would be. So this one would be a negative 70% and maybe a 30%. Cool. That one's pretty good. Let's just rotate this say negative 15 or something. So it's a little different. And then last but not least is the last one. Last but not least is the last one, which could come back to like a zero maybe there. Oh, whoops. No. Negative negative 110 goes out that way. Maybe that's too much 90. This could come up now to like a negative 20. Negative 40 too high. No. The problem here is that like different images, it might actually be a little bit different. So that also sort of like throws things out. But I think that's not bad, right? It's like an ending space for them all to be spaced out like that. I just want to go see the original one because something looks are there? Oh, they actually shoot out further than that too. I didn't realize that he's willing to like let them come out a little further. And that's why he has room for more of them. And their size might be a little smaller. Yeah, we could shoot, we could shoot them out a little bit more. Look at that. So, okay. This first one negative, so it could even be like a 200 then. So it's actually shooting out all the way. This one here, maybe we could pull down a little bit more. So that's this one. X. Yeah. So that would be that might be better. And then I'm going to take this one here, which is the fourth one and make that like a negative 120. And 50. I think that's a bit better. There we go. I'm happy with that. Cool. So I'm just going to refresh because that takes away that pseudo state. So they go like that. So now on all of these fancy card images, what we could do is we can come in and say that there is a transition of transform, which will take like 150 milliseconds. Ease. Don't put a colon there. Ease, I guess. I'm not too concerned. Well, look at that. Boom. Which is basically what we want. We just want it to happen when it shakes. So it'd be able to do that. We want to we have an animation delay of 500. That's when the shaking starts. So this is where my sauce, I would be able to do this as a sass loop. So I'll show you how a loop would work for this. Because what we would do is for say image from one through five, because we have five images that we're doing total. And what's fun with this is we could do my fancy, fancy card image, nth of type. And here we would just write image. And so it's going to loop through and each time take like one and then do something and then two and then apply something three and apply something. Now maybe there was a way to do these numbers here in a good way using all of that. Looking at the numbers, I don't know what it would be. But if you it could be cool to be able to do that with the numbers and just like have all of this through the loop. But my brain was not there for the math on it. But what we could do on this is that my transition delay and my transition delay would be 500 milliseconds plus you don't need the brackets on this. And it's not a calculate you could do it as a calc two probably. But I want to do it plus my images. Oh, this image isn't going to work either. But anyway, plus image like the first time it's me one. So let's do that times 10. So if it's 10, it might not be enough, we might have to play with this number a little bit. But let's hit save. Oh, right. So here, I don't know why I'm not getting an error actually, but I think we need to do interpolation there. Yes. Now let's make this a lot bigger. Now if I think of it at 100, it's going to be too much though. So basically, or we can even go, let's go look at the compiled CSS for that. So here's the animation delay. The first one is 600. Then we have 700, then we have 800, then we have 900, then we have 1000. So because what it's doing is it's saying the first time is this number is one is we're doing one on the first loop. So one times 100, then two times. So one way we could actually do that is zero through four instead. Or if we want to keep that five, you could also do from zero to five. And the advantage of whichever one it doesn't make a difference. So two means it's stopping before it gets to five. But by starting at zero, it means the first animation delay is five, the actual 500. So that might help time things a little, whoops, we broke things. Oh, that's mucking up my nth of type though. So we're going to keep this, or no, we could do, you could actually do the same thing through four or two, five, but then we just have to do a plus one here to make sure that we get through all of the nth children. Because remember, the first one would be zero, and we don't have an nth of type zero. So it's doing zero, one, two, three, four. So the fifth one was left out. So now we can say image plus one, so it's zero plus one, so it's zero plus one, one plus one, two plus, you get the idea. So now that's working. But I think instead of times 100, I'll do times 75. And we just, that's not terrible. Maybe a 50. I think the 50 is better. I'm gonna do a 550 here. Maybe that. I'm just trying to get like that first. I like the delay on the items themselves. No, that's too far behind. Just because if you look here, what's really nice with this animation, oh, it's a double shake a little bit though. It has like sort of a double shake on it, which we could do, but they're also rotating out, which is, you see a little bit more on his. So maybe there's more rotation that's happening on them. I think that I think maybe actually this is probably like 550. And like right now, mine are all shooting out really, really fast. So I think one thing I'm actually going to do is change my animation speed here. It's actually going to become 750. That way I can, the delay here will be, no, the delay would stay the same though. But it gives me a bit more room to play with for how long each one is taking. Oh, see, that's not good though. They're starting too soon. So like I sort of want it, there we go. So you want the shake to already be happening by like the shake should be happening and then they start sort of flying out. So it's just a little bit of tweaking and playing around with the numbers really. That's not bad. Another thing actually I just thought of right now, my animation, we don't want this, we want here. My animation is doing a, animation is linear. Maybe I actually want this to be an ease in. So that would make it start slower and sort of speed up as it goes. Maybe that's all right. There we go. I think that's pretty good. I mean, it's not exactly the animation we could play with that a little bit, but I sort of think that it gives us that overall feeling of how it's working. Yeah, I'm actually, I'm pretty happy with how that's working where it's coming out. Yeah, overall for me that works really well. The one issue is here, the Z index issue is back, which I thought we'd solved. Or no, we ran into that secondary one. And of course there's the whole issue of Firefox animation doing that. Because other than that actually, other than that double looping thing, it's looking pretty good. Let's fix this Z index issue in Chrome. I have a few ideas, I think on how to do that. And that is, I think, so my Z index is normally one. We're transitioning the Z index. What if I transition this? Or no, okay, so the delay right now is in both directions, which I want though, because if I go like that and then I go down, I want it to work that way. What if I cut this in half? Say we did 175. Oh, I know what I didn't realize. If those are open, we can hover on them, right? So in a way that can potentially hide that issue, but you know what, we still got it there. Okay, so see how it's like there and then it, so if it's one card, it's fine, but if they're both in the middle of transitioning, we get that awkward sort of overlap, which I don't even know. It like, is that the end of the world that that happens? I'm not too sure. Isn't that bad? It's better than what it was. I think it's better than what it was. You still get that really awkward part on the text sometimes there, like right there when it breaks through the text. It's not the end of the world, but it's kind of annoying. So I wanted to lay on the Z index when it's going backwards. But I don't want to delay on the Z index when it's coming forwards. So what I could do, okay, yes, that's what I was thinking. I was just trying to get my mind in the right zone there. So what we can do then is transition and hover. When we hover, I'm going to do one more here, we're going to do a Z index zero, zero ease. So there's no delay on the Z index transition. There's no animation is just instantly changing when we hover. But if we remove focus, then we get that transition that's actually going to happen on it. So now, though, I don't I shouldn't need milliseconds on that. Why is it not? Oh, okay, there. So if I did zero one second, zero, zero. It's it kills it yet. Okay, so we need to actually we need to put milliseconds on these. I didn't realize that I don't do animation durations of zero very often. So you need a unit. So there it's working off is working. If we go here. So before the animation starts, I think I think it's the right idea. I think I just want to take the transition delay here even faster. And I don't know, maybe I'm mucking things. So it's working there. See, it's not working quite that way. But it's working better when we do this now because the delay is shorter. Maybe there's a better solution to this. Oh, look, that now that looks okay when it's growing. I think we solved it. There we are. It's still there a little bit, but no one would ever really notice that I think. So let me just make this a little bit bigger. There we go. So I actually think that's not too bad. We get that. Oh, look, that one's all mucked up. Why is that one not? Oh, no, because of the positioning on the big cards is actually really good. It's not perfect on the little cards, which is really annoying. Oh, no. And it's just because the positioning of them to start with is different because the card is a different shape. I mean, that's easy enough to fix. I'm not actually going to do it on this one because we got through it all. But all we would have to do is this is on my say on this one, fancy card image, I don't know, on these ones here, this these transitions would all be set up for my large one. And then we'd have a different set of movements for the other size. But honestly, I'm pretty happy with what's with what it's doing. Yeah, I'm pretty happy with that. That looks good. The shake works. Those come out. Now, maybe those should actually do those should those have a shadow on them? Let me go back to the original. Do the cards have shot the images have shadows on them too? No, they don't. Oh, maybe they do. Oh, they did. Hmm. Chrome, you can put shadows on images. You can't do it in other browsers though, just because they're replaced elements and with how it works. So it's not actually part of the spec. You shouldn't be able when I say shot, we could put shadows on them. I could just put a shadow on the images. What am I talking about? That one's easier to do. Let's just do it fancy card image. Box shadow, the box shadow will only be on when and it's not going to transition or anything. It's only going to be there on hover so it doesn't accidentally show up now. And we can do a, I don't know, negative to negative to Ram, negative to Ram, RGB to Ram, I'll do a bit small 1.5 rem blur, and then an RGB of black point two or something point one. I don't know. Let's go see. I think the offsets are actually bad. Negative two and two. And I'm going to make that actually a three. See what that looks like. And then that's okay, right? That actually looks pretty good. I'm just going to soften them up a little bit. Maybe that's a one point one and that's a two. There we go. The shadow on the overall shadow shadow, I think I'm getting notice there's. Oh, okay. What's happening now? See the beginning at the beginning of the animation, there are all the images are actually overlapping one another. So the shadow looks super dark at the beginning there. You notice how it's like the super dark shadow. That's a little bit annoying. I sort of like that the images have a softer shadow, even though I guess it should be anyway, whatever. We could transition the shadow. I mean, we have some probably repaints and stuff going on right now anyway. Okay, we're almost done. Transition delay because I could transition my shadows as well. But then I'd need two different transition delays. Because what we could say is that the box shadow is actually at a, and this is where it'd be nice if we could use the an after on there and do the same trick I did before, where we just turn the opacity on in the after, but that's what we can't do outside of Chrome. So you could have it where outside of Chrome there is no shadow. And then you just use the same trick that I did for this guy to be able to do it. Otherwise, we just change this value from zero. So there's nothing. And then as that comes in, so we could transition that and do the box, I'll do box shadow first box shadow. And even I'm just trying to think if I do a zero milliseconds, like I'm not actually transitioning it, this is turning the shadow on. Because that doesn't matter zero millisecond. The delay is what's important, but I'm not going to put it and we'll just put linear. So I think that should just have the shadow turn on at the end. Oh, but we don't actually get anywhere. So here on all of these, let's just say, here, box shadow. And the reason I'm putting it here is because we could delay it, let's just put a one. So it really, once again, it stands out to see if it actually works. So if I put this with a point one, like we had originally, I think it actually worked. Right, we don't get that nasty shadow at the beginning. And then when it starts shaking, that works for me. Yeah, I'm actually really happy with how that's looking. So it actually stopped recording completely for a little bit. I was like, you know what, this Firefox thing, I'm done with it. It was eating at me and I had to fix it. So I got it fixed, but I wasn't recording. Like I said, but you can see it's working now in fire, sort of. So what I did is I actually took the animation delay away. And I took the transition of the scale away. I left the Z index thing and maybe the Z index could have, maybe all of, I said that I don't want this in the animation. Maybe it would have been worth it just to bring all of these into the animation instead of doing the transition in the animation. So as I said, you learn stuff along the way with these. And so I'm doing it all, I'm doing the scale all with the animation. The only thing with that is that you find it's a little bit harder to actually time everything right. Because of how it's working, so you can see my timing is a little off. But here, let's just do forwards. So when we hover on, it works better. It doesn't shrink away. So the animation is all there. And we'll look at the animation in a second. I just need to change my animation delay here as well. And I said, this is where you start playing around with the numbers a little bit more and it becomes a little bit more finicky a little bit, I find. So I don't know, like there's, anyway, there we go. So it starts shaking, they all shoot out, and then we can get rid of it. There we go. So yeah, I'm pretty happy with that. So this is in Firefox, and it seems you're working shakes, they'll shoot out. And just to show you the transition now, or the shake, it's just now I'm starting at zero, we get up to 30. And then we run through it like that. If we wanted to also another thing we could do is we could do at keyframes back to normal. And for that, I'm just going to say, we're going to have this. And we're going to do a 0% here of that. And then the scale here is going to go to a one. And that's just because like now when we go this way, obviously we get the animation. But when we come off, we don't actually have it. And I can't revert this is why transitions are nice because it'll go both ways with the animation. If I reverse the other one, it would shake on the other way to like shake in the images. I think it'd be kind of awkward. So with this back to normal here, then we could add that over to where is it? Where is it? Right here. So we could add my animation back to normal. We'll say 150 milliseconds ease and ease. I think ease is what we originally had anyway. So now we can grow out, it shakes, and then we can get it to go back. And you know what I'm going to do, we're actually going to change just a little quick thing here at the end. We're going to here, I think I'm actually going to bump this up to like a 45. And of course, now that's it there, this one going to go up to like a 55, 65, 75, 85, and that should be okay. There's we get a little bit more of like a slow growth. And then a quicker shake. So it comes up, it shakes, and then it feels like it's matching with the overall behavior of everything a little bit better too. So the very, very, very last thing I'm going to do is to come on to my animation delay here and just make this like a 550 or a 600. There, I think that just we're back to where we were. I think it's looking a little bit better. And it's working in Firefox and in Chrome now, which is awesome. And yeah, I hope you like this video. If you didn't like seeing me build things out like this without having planned them ahead of time, I have other ones that I've done. So the playlist for those is right here for you viewing pleasure. And with that, a very big thank you to my supporters of awesome over on Patreon, Jan, Johnny, Stuart and Tim, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your recording the internet just a little bit more awesome.