 Hello, my friend and friends. I recently came across this codepen by Alvaro Montoro, who actually used one of his effects for something else not too long ago, but I thought it looked cool. I really like the effect. Just doing this type of layout is already kind of interesting. And then to get this hover effect, it's even more interesting. And we're going to be using Clip Path 4. And I think there's a fun way that we can use Clip Path. So I'm not going to copy what he did. What I'm actually going to do is fork his codepen and try and do it on my own without looking exactly at how he did it, even though I have some ideas. So I'm just going to take everything. I'm going to leave the body styles there, but we'll take everything else and delete it and start start with our own sort of fresh slate here. I'll zoom in a little bit to make the code a little bit bigger for all of you. And we're going to dive into it. I will say if you wanted to do this without that hover effect, you just want that grid. You could do it where you turn the you have a parent for every image and you rotate that and then you turn the image back and use an overflow hidden and stuff. And that would work perfectly fine. But what I really like about this method is we just need our images in here and we don't need anything else, which is great. So yeah, I think the first thing we should do in here, just because my images are way too big is a max width 100% to prevent the overflow, which we'll start. And then we have a gallery right there. And I said that really in a strange way, but we'll roll with it gallery display grid, right? And I should have kept alvaro is open. Let's bring it over here. We have three. Just trying to think how we would set up the column there and they don't begin we have his code there, but I want to see if I can figure this out. grid template columns of repeat. I think we want three, but like if I open it, you can see like they're overlapping sort of. So I think we actually went six, six, one afar. That should give us six columns. And then with the six columns there, we're going to do is grab my images and use nesting here because we're just mucking around. So my image that is inside of my gallery will actually then have also a height of 100%, which should make it match what it's inside of. And we'll do an object fit cover like that. So that should at least give us something decent. The other thing is their grid column, they're going to do a span two. Now I'm not sure if this is going to work the way I was hoping it would. Let's also come here. I'm trying to think if I should maybe we'll just do like, I don't know what he had that at 150 pixels maybe. I also zoomed in a lot. So we'll see. I'll do 100. That's fine. And then maybe these images get an aspect ratio of one to make them squares. So then I guess we don't need the height 100%, do we? No. Okay. The aspect ratio will keep it a square based on the width, which is set to 100 pixels right now. Cool. I might have to zoom out a little bit, but I'll move my head down just because we have a blank space for me down there. And now the next thing, how am I going to get them to, let's add a gap here, because I think we're going to want a small gap of, I don't know, 0.25 rem or something tiny. What are we going to do to get them to overlap like that? Okay. We need to move these two go on their own column. So that one, this is our fourth one. So image, we'll say and nth. I'll just do nth of type. We could have done nth child too. That would work. We want the fourth one. And we're going to do a grid column of two, two over span two. That should work. That's pushing over one. And then it sort of gives us this that we wanted. That's good. I'm a little bit stuck to get them to overlap on the rows. Do we need them overlapping on the rows? We'll find out, I guess. We want to get the shape. And to get the shape, this is sort of the interesting bit anyway, is to get the shape to be correct. I think I want them to overlap on the rows. We'll figure that out in a bit. Let's get their shape down first. And to be able to get the effect that Alvaro did here, we have to use a clip path just for like how this is changing. I know that's what he did. I'm not very good with clip paths, because we want to use a path here. We don't want to use a poly. If it was, if we didn't have round corners here, actually, I could just use a polygon and potentially get it to work. But one thing I know about clip paths is we can animate them so we can get that to work. But they're a bit funny to work with. There's lots of other editors like this one, but this is the one I'm going to suggest. I'll link it down below, because it's just like a github.io thing. So I'll put the URL in the address or in the description down below. The reason I like this is because I can put in the coordinates. We're going to play with that a little bit, I think, but I can also move stuff around here. So I'm going to zoom out first a little bit, just to give myself a bigger grid to be working on. We're going to put our first point and we're going to do a move to, so this is where we're starting. I'm going to do a five, I'm trying to think, we'd have a grid of 10. Let's just try here. I'm thinking a grid of 10 because our images are 100 pixels right now. Actually, I think we're going to go here, and then I'm going to click on this little guy. We're going to insert after and I need to do a curve to, and I want to curve it to not the next point, but like one over from there. And the reason I want to do that is because then I get these little handles from my Bezier curves and I can drag those up and then I get the top. So that's the top of the shape that I want. And then because of everything moving, I think the easiest thing is just use curves everywhere because these are going to have to move around a little bit. That's eight. So that's my nine. That would make sense. So I'm going to do my nine there and then choose another curve to we're going to go down. And then again, I can, oh no, so this one, and this is where I like, if I make a mistake, I can just grab the point where I made my mistake. It's not letting me do it right now, but we're going to fix it. Let's do another curve to, which I can just zoom in and out with your mouse wheel, by the way. We're going to go here, nine and four. So it lines up there and now I should be able to move that one down. Perfect. Oh, that might muck up these curves though. We'll see what happens there. And then I can bring that. So that looks like it's okay, actually. Hopefully that doesn't cause any problems. Then we can grab this. Once again, I'll just finish this off quickly. We'll cut ahead to when it's finished. And I'm basically done. I just want to show on this last point, once you've drawn it in here, what you want to do is you want to choose the insert after should be a closed path. And if you're good, you can actually write all of this out yourself. You don't have to use a tool like this one to be able to do it, but I can't do that. Now, the problem here is I can get the code for this. It's actually up here is the code for my path. So I'll show you the problem with it. Actually, that's, I'm just going to copy that and we'll go over to, oops, that's alberos. We'll go over to mine. And on these images, we're going to add the clip path. So we just do a clip path of path like that. And then inside quotation marks, we can put the path we had, but they're going to be super teeny tiny. Because it's based on these coordinates, which are all basically like how many pixels we're dealing with. Now, the reason I, one of the things I like about this tool is there's also a scale option here. So I did it based on 10, but my images are 100 pixels big. So I can scale that hit scale. And now if I zoom out, we have the bigger version here. And so I think now if I copy this, we're going to find out if I mucked it up or not, but we'll replace this path here with this new one that I got. They're still not big enough. Okay, so we'll come back. I think it's the right idea. Maybe for some reason, I need to scale it up more. I'm not sure why. If you know why, leave a comment down below. I thought basing it on 100 would actually work. So now that should work. Yeah, that's good. It just, we have to slide them into their spaces more and we'll figure that bit out in a second. Actually, maybe we should do that next actually because some people might not want the animation and stuff that we're going to look at doing. So if we just had this, how do we actually like slot them in together now? And I'm wondering if, oh, just I did 100 for my columns, but then I have my images spanning two columns. So my column, the images are actually 200 pixels, which is why I had to double it from when I had it at 100. That makes sense. So we're dealing with an actual scale of 200. Cool. I'm glad I figured that out. I'm wondering, let's just come on my images. Can I just do a grid row of span two? Is that going to work too? I don't think so because that's not doing anything. Let's go look at my grid. I'm going to remove that. Let's go down here and look at what's happening. So we'll turn my grid on. Oh, I know what we can do. That's 100. Okay, let's come here. Let's do image size is 100 pixels just so I don't have, if I make a change here, our image size. So we're spanning across two that way. But what I think we want to do, grid template rows, I should have just copied and pasted because we want this exact same thing that we have here. Look at that. Cool. Actually, we don't need six though. We only need three of those. So what's happening is my image is actually basically overflowing at the bottom. Is all that's happening there because we have it staying at the, where is it? The aspect ratio is maintaining that. I guess I could do the, no, see, and if I did a grid column now of span two, I think it would actually break it because it would push these down. No, that seems to work too. Okay. So I guess we can, oh, that's grid column, grid row. I think this might break it. Yeah. So it's now this is actually taking up two rows. And then this next one is two. Whereas if I don't put this, this is just the image overflowing out of the top of this because of the aspect ratio we have on there. So yeah, if we did, I can't really do an overflow hidden because we're just using grid cells. But if there was a way to do that, we would be cutting off the bottom of all of our images. You can see even here, so these bottom ones are a really good example just because they're literally overflowing out the bottom of the parent. So we're sort of relying on overflow to make this happen, which is kind of interesting. Cool. That's working. Super happy about that. There we go. So if you just needed that, there we go. I guess you can go, but don't go because it's good for the algorithm. If you stare around and, you know, like and subscribe and all of that stuff, we'll hear here. Or just leave a comment for the sake of engagement if you'd like. But you don't have to. Don't worry. While we're here, let's get that animation going because that was kind of cool. And this is an interesting thing. If you are using paths and this is sort of why I wanted to do the video to be honest with you is animating paths. It can be a little bit tricky because you need to keep the same amount of points. If you have less points, like if I just want to go to a square now, it won't work. So you need to keep the same amount of points because it just moves where each one of those points actually is. So if you have a different amount, it can't move a point that doesn't exist in the second one. So that's why I like tools like this because it makes it a little bit easier to work because then I can just move these to where I want them to be without having to worry about where everything is. And if I shrink that down, you can see here's all like the actual coordinates of everything. So I could come in here and figure this out and see I'm not good enough to know how to use like looking at this is I just my mind goes off and looking here. I can't do much either. So what we can do here though is move these visually around and you have to think about how you want these points to animate because as I said, if I move this, this is literally like if I move this to here, that's the animation that would happen. This point would come up to here. So do I want that to happen or do I actually want like this just to move up a little bit and then this other one comes up like this. So you have to decide this. Can I command Z? Apparently not. I think I'm adding points. Oh, I can undo here. Good. I was a little worried there. Is there a shortcut? I don't know. Let's just try and get that back to where it was. But yeah, you just basically need to think about how you're going to animate everything once you start moving things around. So actually, if ever you muck something up here, but you have something somewhere else that's actually working, you could just copy the path you have here, right? I was like, Oh, no, I broke everything. But it doesn't matter, you just copy the path you're starting with. And then you paste it in, and you'll be back to where you started. So I think what I want to do is move this here like that, and it's going to go to I'm just at the bottom there, you can see it shows me where the coordinate is to as I'm moving it around. So I just wanted to make sure that was at my zero zero, I can also see that's there. If that one there is going that way, I'm also want this point here to do the same thing. So I want that to be at zero 200. And you can definitely fine tune by looking at these. Then this one, I guess it would make sense for that one to shoot off this way and go to my zero 200 over here. And then this one here for it to go to my 200 200. And again, you can sort of get it in the right place, see what numbers are moving. And then I could do my 200 200 down here, which, you know, it can be a little bit easier to get precise. And we're going to want to do that a little bit for these points, the bezier arm things that probably have a name, because it's going to be a little bit easier. Because I think what I actually want to do is take this one and this one. And this is with the first point, because it's your M, which is just setting the first point, it's just the coordinates of it. For all these other ones that I use curves for, these are your coordinates for the point itself. And then these are for the arms. So this is the first arm. And this is the second arm. And then this part here is actually where it is. So I think what we're going to do, this one's also going to go to 200. 200. Let's just do 200. I can leave it at 80. Actually, that's fine. And then this one will also go to 200. And then 120. So that's fine. And then I just want to get rid of these curves. So I think that's there. So this would be 200. And then like a 50. And then this point here that I'm moving, I think would be my 200 and a 50 as well. So it just creates and ends up creating a straight line there. So I'm not going to make you go through this all with me. I'm just going to cut ahead to once I have the shape proper here. Okay, so I think I got the shape looking the way I want it to. I'm hoping I did. I'm going to copy what I have there. And what we're going to do now is when this is my gallery, this is my image, there's my image selector. That's just the fourth image, I guess we'll come here. And then we can say and hover. And we can't really focus on images. So if you did have this on something other than an image, I guess we could do a focus state too. But let's just change my clip path. First of all, and we have our new path that I'm just going to paste in. And the path should work. I don't see why it wouldn't. So there we go. Oh, we have to do the Zed index hacky thing here that I've recently started doing, which is cool too. We'll talk about that in a minute. But we can see, okay, that's working. Now, let's, oh, okay. No, that sucks. I don't have the round corner there. That could mean a lot more complicated of a path, which I don't want to do. I'll worry about that in a minute. I'll make a really complicated path. Anyway, let's do a transition for now of clip path. And I'm just going to say 500 milliseconds or something. Just so we can see. There we go. That's sort of what I wanted. It just sort of like unfolds that way. And again, that really depends on how you move the points from here, because that point that was here was unfolding out and unfolding. It's basically the style I went for. If you wanted to open, you could even have it like sort of do a twist or something, whatever, however you do this, it's animating each one of those points individually. So that's just how I did it. Probably isn't quite the same. Yeah, virus is a little bit different. His like middle one here, like I think he did everything like up and over and down and sideways and stuff. I'm not going to worry about it. I'm not changing my path now. I'm sort of happy with that effect. One thing, obviously we need that with that is a Z index now of bigger. So let's just do 100. So say it's sort of my top layer, which is going to work. But see when I'm on it and then they go off, it goes behind again. And that's because it's only getting this high Z index if we're on top of something. So we're going to have to do a little hack there. To get that to not happen. So once I go over, it stays in front. We'll look at that in one second. Because I want to keep the round edges. So when I don't want to have to make the round edges here and then because that have to basically go back to my other one, add a whole bunch of points there. And I think it'd be really hard to do. Is that what I've eroded? Sorry, I didn't want to look at his code, but I'm just going to look here. Did he do that? He'd put a border radius on his image, of course. That would be easier. Image, image, border, border, radius. I'll just do a point to five round. Why is it only on one corner that I'm getting it? That's so weird. I'm getting it in the top left. My clip path, it shouldn't be cutting into my image. That's weird. Okay, I mucked something up along the way. I'm not sure what I did. That's interesting. Let me just turn. Okay, one second. I'm going to turn off this clip path for now. Oh, no, I need it though. It's going all the way up to the 200. No. Hmm. I'm not sure why that doesn't work. But for now, we're going to keep it like this. I might investigate and do a little update right at the end. Let's look at that Z index hack I talked about. I call it that just because I do an ad keyframes of, I call it Z index hack. That's why I was saying that it is a hack, but it works really well. For here, we're just going to do a 0% comma 100%. We're going to say the Z index here is 10. I'm doing 10 because I want it to be lower than this, but I want it to be higher than the default. I could even do one there and I think it would work fine, but I just want it to be like I'm pulling it forward a little bit. We're going to do that. Then here, we're going to say this is my image. If you're not used to nesting, this is just the same as having my image hover because it's nested in here. The ampersand is a placeholder for the selector that I have out here. Here, I'm going to say my not hover. There we go. I'll explain how this works, but we're going to do our animation on here of Z index hack. We'll say 500 milliseconds because that was the timing of my animation that I had for my clip path. Now, if I go off, see how it stays in front? Or if I go down to this one, it's always in front. Let's just turn this animation off for a second. Now when I go on, it's in front, but as soon as I come off, it goes back behind. What's happening is because I'm doing the animation without the forwards keyword on here because forwards means once the animation finishes, you're going to keep that animation on you. I'm not including that here. When I hover on something, we're on this state. Then when I come off of hovering it, it now enters into this not hover state. As soon as I stop hovering on something for 500 milliseconds, it has a Z index of 10. Then after those 500 milliseconds are passed, this animation basically is just removed from what we're working on because it gets to the end. It goes back to the initial state because we don't have a forwards or anything, and then so it goes back to being the regular Z index. Now if I go like this, it's always going to be the one I'm hovering on in front because we have a higher Z index, but it's always going to be in front in terms of the entire time it's doing its animation. I think you did do, see how everything is darkening around it? I wouldn't be surprised if he used a has. We can even see, did he use has for this? He did. You can definitely use has. I'm going to link Delveros in the description down below so you can see how he did it and I sort of got the idea of what he did here. I figured it was a filter. Using has would work, but I'll show you a trick where you don't need to use has just in case you want better browser support. Of course, I'm using nesting now. Just don't use the nesting and then don't use the has. If you want, what you could do is you could say, I'm just going to come here and do this on its own just to make it really clear how this is working. Normally, I would include it with my other CSS up higher, but I'm going to say gallery hover and then choose any image that's a direct descendant and we can just say he used a filter, right? So filter, I think he had a brightness in there of like a 0.5. If I hover there, everything is getting darker. I didn't know what the other one was at saturate saturate of like a 0.5 to maybe he did. He had something else that sort of graded out more. We'll go with that. I think this was lighter, though, whatever. We have the right idea. And I guess we should transition that as well. Transition clip path. And we will transition our filter to filter 500 milliseconds because I am using this 500 milliseconds in a lot of places. It probably would make sense to have it as a custom property as well. So there we go. Now it should do this nice little thing. And then we can just use hover and actually, okay, here we don't want the hover. We just want to say gallery and then any image hover. And we then we reset this and I just do a one and a one there. So then the one I'm on keeps you were sort of we're bringing them all lower. Now, both of these have the same specificity because they both have a class selector. They both have the pseudo with the hover and they both have an element selector here. So it's just the order here wins out because they're both the same specificity. And so all of them are getting this and then this one comes after and it's like, no, if it is the image I'm actually hovering on, we'll, we'll go back to the styles we want there. And, you know, just for fun, we can even like boost the saturation of it or something because, you know, let's make it super saturated when we hover. So it even gets more saturated than when it was, which I think it does, right? Yeah, for sure. It's good. Look at that one at the bottom. I think we can overdo saturation. Yeah, definitely look at that orange. It gets like more intense when we hover on it. That's kind of cool. All right, I figured out why my border radiuses aren't working when I hover, which I'm happy about. And it's because I was playing around a lot. I put an outline on here to try and visualize it just to make sure I wasn't going crazy. But what it is is the my width 100%, which I don't need on there. They're going to have the max width 100% on there already. But I'm spanning two columns. And the reason I figured that out is I was inspecting on here. And then I was like, why is this happening? And I was looking at my images and they're 204 pixels wide. And I'm like, and my clip path is 200. And so why was it not lining up properly? And that drove me kind of crazy. And so the reason this is happening is because I have a gap here as well. So if they're spanning across two of my grid items, I have 100 100. And I have this 0.25 rem down the middle here. So I think I don't know why this didn't happen in a virus. And I probably have to look, but I'm going to do a 100 pixels minus 0.25 rem divided by two, I think now. Oh, I broke every Oh, no, there we go. Okay. And now my border radius is working that way too. And this would be a good time for a custom property. So you could change. Oh, no, I want to keep my gap. No, I don't need it. I was thinking you might, but I would just want to change my border radius. It's too big. But yeah, that's that made me happy to figure out why that was going wrong. There's probably other ways that we could get that to work as well. But I'm happy. I probably wouldn't do the I do keep 100 pixels here. And then I probably use the calc down here. Just so we set it and forget it here and everything should work after that. And then the gap number in this number I would use a custom property for. So if I change my gap, then the this number is updating along with it. So everything works along the way. But I'm glad I got it working. I think it looks pretty good. Obviously, my timing functions a little bit different. And I probably did a few other things different from what Elviro did. But I just want to say if ever you're looking for inspiration, people are like, how do I learn stuff or get better at stuff build fun things like this and just have a little bit of fun with CSS? Because that is really the way see what other people have done. See if you can recreate it when you get stuck, you can then go and look at what they've done. And I find it super useful to do stuff like that, both to be inspired by cool stuff people have done and also to help me get unstuck when I do get stuck along the way too. So I hope you enjoyed this video. If you'd like to see other videos where I sort of try and build out something that I have seen that I did enjoy, I've done a few of them in the past. I'll put the playlist right here for your viewing pleasure. And with that, I would like to thank my enablers of awesome Tim, Simon, Andrew and Philip, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.