 Have you ever stumbled across a cool effect that you saw on a website and thought, how the heck could they do that? Well, that happened to me recently when I found this pop-out effect that I thought looked really good. And I thought it would be a nice exercise to be able to dive in and look at how we can break down someone else's code and pick out the important bits of it to be able to recreate an effect on our own. So the first thing we're gonna do is jump right into this, which is a code pen by Michael Anelam. I'm really sorry if I said your name wrong. But because we are in a code pen here, it does mean I could just go to the View Editor and look at their source code, but let's pretend this is something we saw on an actual website and I go, that's really cool. I just wanna learn from this and recreate the effect. So I would open my DevTools and in here, we can sort of break things down. I just used a Control Shift I. There's the F key that can do it, or you can just right click and choose Inspect Element, whatever you want. And then you can just take this little guy and click on the piece that you wanna sort of select here. So we're gonna focus on this and see how they created it. And basically what I wanna do is start by looking at the different pieces that they used and the different pieces we need to be able to do this on our own. And so I've got us to a starting point, right? Don't have very much. I've put a div class of person in here. You have a very basic CSS reset that doesn't have very much going on, though this is probably the only really important thing with it. And the other thing that I do have in here is I've gotten a background thing, got this from OnSplash that we can use. And then I also have my thumbs up that I use all the time that I already had it on a transparent background. So I thought it would be the right one to choose, was nice and easy for me. If you do need to get an image on a transparent background, you have a person or something else, you wanna remove the background, just look up, Google it, there's a bunch of free tools that can do it that all work pretty well these days. So we're not starting with much, but we know that we have a person and they did their inner container and a container and inner container and the two things. I'm gonna start off without doubling the container. It is important to have, let's pull this back up, assuming you'd wanna do the name down here again and stuff like that. I am gonna leave person like that and then do like my, let's call it image container. So yeah, we'll do, we'll call it person container, just like that. And then here we need image times two and so we get two images right there, image and just if you don't know, that's emits. So I have videos on that, I'll have a card pop up that talks more about emit. This one will give the class of circle and this one we can give a class is equal to person IMG. There we go. So we know that those are our two classes, we can select them. I'm going to leave this alt empty, but this one we're gonna throw in Kevin giving a thumbs up because, and there's my image without a source, we can see it coming up. So the reason I'm putting it on this and nothing on this one is, I see that background is much more decorative and the image that's important is the person who's there. So if something is decorative, you still wanna have your alt attribute here, but you leave it blank to indicate that it is decorative. So let's just throw these two sources on here. And there we go. I got my two images coming in and they're right there. Everything is moved down a bit off the page just because I figured we'd have to center stuff. So I just added a bunch of padding to the top of my body. You wouldn't normally do that. This is like demo only stuff. But now, obviously they're really big. So this is part of any decent reset would have that. So let's just go and say that my person itself has like a max width of, I don't know, 20 rem and see how big that looks. That looks pretty good. So we'll stick with that and we'll do a margin inline which is the margin left and the right and throw an auto on there. It's a little bit more than that, but there's a logical property that most of the time will basically be your left and your right. And now we need to get them obviously to go on top of each other. This to be a circle. This is times when we could look at how they did it. So I'm guessing there's position absolute on these. Probably on both of them. So let's just take a look here. We can see positioning. There we go. Position absolute on that one right there which is the circle. And I'm guessing it's the same thing on the image. We have positioning stuff which makes me think, oh, but they did position relative on there. Hmm, I would have thought position absolute but we'll stick with what they did. So we'll just say for now, circle is a position of relative and I might know a relative absolute. Absolute. Did I misspeal circle? I did. Circle. Ha, there we go. So I was a little bit worried about this. Is this too big? Oh, my, okay. So just let's rewind one second. My image was small and when I did that it pulls it out of the flow but I also don't have a containing block right now. So the max width for it is actually my viewport the root of my document. So let's add up here a position of relative so that this is my containing block. And now that makes more sense. The problem is it's on top of my image which is probably why the person image, I guess this would actually make more sense is person circle. So let's just do that since we're using them everywhere else. Person circle. There we go. So this might be why they bothered with the positioning on here. Though they did have some position stuff going on but we'll just do position position. I could do this with grid as well and maybe not have to use absolute positioning but that's fine position relative and I'm gonna do a Z index of two just to pull it back in front. So hey, we're off to a good start. I want my, let's make this actually into a circle. So we're gonna say that it's a width is already set let's give it an aspect ratio of one over one which will make it into a square. It gets stretched. So we'll also do an object fit of cover to make sure that it's not pulling the image one way or the other. This is the same or very, very similar to in background size of cover. Then from there, it's way too big. So we're actually gonna set a width at like 60%. You could set a hard width on there which would be fine. So that's good. I want it to be at the bottom. So to do that, we can just say bottom of zero and it's gonna move down to the bottom because we have absolute positioning on there. It's going to its containing block which is the person. So it's moving to the bottom but I also want it to be centered. And so I'm actually gonna change this bottom to an inset so I can use the shorthand for top bottom left and right. I want the top to be auto and then I want the left and right to be zero and I want the bottom to be zero. So we can do that. The reason I wanna do that is because we have a width on there. So it doesn't actually change the size but what that does do is it opens up the ability to do a margin in line once again of auto and center it left to right. Let's just make this a bit bigger for the moment so you can see it better and we can also throw a border radius on here. Border radius of 50% to actually make it into a circle. So that's looking pretty good. Let's make this maybe 70%. Cool. Now what I wanna do is we need to obviously clip the person so the head is coming out the top but not at the bottom. So that's like the trickiest part of this whole thing I think. And I don't know, I have ideas on how they did it but I'm not sure. But what we wanna do also is probably organize this a little better first of all. I'm gonna put my aspect ratio down with my width. Border radius can stay there. Actually that's not too bad. And the object fit, I'm gonna bring it all the way to the bottom. Okay, I just like organizing things a little differently. It was a bit messy for me. So perfect, we're okay. Yes, we're good. So yeah, I guess the next thing is trying to figure how we can clip that. And let's see what they did on it. So we have, as we saw, we have the circle and we have the person. Nothing here seems to be limiting it. So let's go to the container inner because I see that like it's sticking way up there. So there we go. We have a clip path that is on there. So if I gave this, this is a fun thing in your DevTools like you're trying to figure out like have your backgrounds in here read so we can see what's happening. And so they created a clip path that's actually following like this shape and then they can have it go like that. Now the problem with clip paths is they can be very specific and I have a feeling the numbers here work perfectly for their sizes but will not work perfectly for our sizes because I didn't follow them exactly. So we could try and recreate a clip path that would work better for us. There's tools that you can use to generate paths and stuff and maybe this one would work. But I have an idea sort of another way to do it where exactly what they want. The main idea, we get different approaches to get to this but the main idea of what they did and I don't know why when we hover on that it's showing it is only that is clearly the clip path actually like turns. We turn that clip path off. I'm guessing we see everything else. So yeah, the clip path part is like sticking down and covering that. So that's the important part. So we want to give basically that has that shape to it. So the way they did it if you want to try and recreate that and learn more about clip passes fine but the main thing I'm going, okay, the important thing here is giving my day of that shape. So let's go and give my day of that shape. And so that's my person container. So let's come here and say dot person container and let's give it a background. So we can see it background is going to be pink and let's also move this out of the way a bit more. This is where things get a little more interesting. My person has the max width of 20 M. I'm thinking I might have to give this more of a hard value because I need this width and this width to be the same. I think what we're actually going to do here, let's just do 15 RAM. And then this could be at 100%. It's too big though. This is, hmm, run into a dilemma on how I'm going to do this because okay, I have some ideas. We're going to leave it like this for now. Now what's important, we're overflowing at the top of the pink. So that's this one. And I think what we need to do right now is make sure that this is tall enough. So once again, I'm going to use an aspect ratio for this. So let's do aspect ratio. And we want it to be one over two just so we get it to be really tall. And that's probably too much. 1.5 would probably be fine. But we need my picture down at the bottom. We're going to have to play with the size too. But let's see what happens here first. Easy way to get to the bottom. Let's just do a display grid. And then align items, align items. And there we go. You can use flex, you can do other stuff here too, whatever. That works. But now the fun part is we're going to do a border radius on this. Border radius, zero, zero, 100 VW. 100 VW, fingers crossed. Ha ha, yes. I was really hoping that would work. I just find it easier than a clip hat. So basically it's zero here, zero here. And then 100 VW will always give you, it's just like a gigantor number. If you did 100%, I think it gives you more of that. You don't see it now because it's going behind but it gives you that weird overly shape. But really large numbers that are bigger than the actual size of it give you the pill shape. So it's a little bit of like a CSS hack with viewport units there to get perfectly round sides. And I only want it on the bottom and not the top. And just to show you, let's do the 100% up here. See, it gives you like a really awkward shape going on. So we're not going to do that. We're going to do it like that. And actually I think that shape was different from what I was expecting, but that's okay. Those 100%. Now what I can do is an overflow of hidden and there we go. And because that overflow is hidden, I can take my image and we can make it bigger. Let's just do a transform scale of like a 1.1. Maybe a 1.3. Is that too much? We are using positioning. So I might as well just do like a left of 2M or something. Let's just, there we go. That looks a little bit better. And the idea here, the same as they did here is we want this empty space on the top just to make sure that when the head is popping up that it never gets clipped off. So you want to make sure you have a lot of space there. Just so if you have different images coming in they can work. Now maybe we don't need that much space. We could probably get away with something like that. So you can play with the numbers that you feel work for you but just make sure you always have enough space on the top. And I think I'll make this even a little bit bigger. There we go. And maybe 2.25 or 2.5. I'm just trying to center myself. There we go, perfect. So we get something like that. Now we can turn off that pink background and we get that effect. So right away that's already kind of cool though it's not that hard to do something like that. But now we obviously want to have that hover effect that's on there. And I think what they did was probably just do, actually let's look at there. So when I go on, the entire thing is getting bigger and then the person is also moving up. So I have a feeling, container inner. We're just going to go on the hover right here because then you can get all the hover styles for it. So you click the hover and then you click this just so now it will show hover styles for that element and then we can hide that away again. And interestingly, maybe it's the entire person. No, the person's not. This container maybe. Let's try the hover on that one. Aha, there it is. So they're changing their scale. I guess they're going from smaller to bigger. So when we hover there, that's scaling up. And so that's sort of the easiest way. So you're taking not the entire person because if we did the entire person we'd be scaling the name as well. I only want to be scaling this. Now it's going to 0.54. So to me before, if we looked in here we'd find another transform, scale is 0.48. So they already shrunk things down a lot. So they're just playing with the scale. They're making their scale bigger. So we'll do the same thing. That's my person container. Yes. So we can say person, container, hover. We can't really focus on it because it's a div. We could add, we could make it focusable, but for this it's more of just a fun effect. It's not like we're hiding content. There's not something that we don't really, it doesn't really need a focus state on it. So I'm not going to worry too much about that. If it was something that you'd actually interact with that you needed to show that it's interactive so somebody can click on it, then we'd want to or interact with it in any way. Then we'd want to have a focus state or a focus visible on there. So let's just do scale or transform, I guess. Scale is its own property now. So you just do scale and like 1.5 and it should work. There we go. But it's not, I don't know what the browser support is yet. So we'll stick with what is well supported. I will do a scale of like 1.1, which tends to be a lot, right? So it grows by quite a bit and we will do our transition of scale and not scale of transform. If you did use the scale property here, your transition would be for scale here. Let's say it's 350 milliseconds and this is where you could look at theirs too if you really want to copy it. Let's just do an ease in, out. So we have a nice little, maybe that's too slow. There we go. There's a weird little shift in the background image there but I don't think there's much we can really do about that. So it's grows a little bit and then we also want the image, I think the image, I mean, the image is definitely scaling. Just make sure you turn your hover up. Oh, I turned off the transform on here. So that's an interesting way you can do it and see how elements inside are working actually turn off like the one on the parent and then you can see what's happening to the children. So the child's really just moving up. I don't think it's scaling. Maybe there's a small scale on there and we could dive into their code to figure it out but let's just say that when we have this, I'm gonna bring it down so it's with my image just so the styles stay together. So we're gonna say when the parent has a hover on it, the person is going to transform. No, we're gonna do a translate. Why? Of, I don't know, one rim. That should just make it jump. So we actually want a negative one rim on there. Oh, and because I originally had this scale on there, we do need to keep that. And that's one of the reasons it's kind of nice, these new properties where we don't have to, you know, we have our scale and our translate separate properties because then you don't have to repeat them if you do something like this. So by having both of them on there, if we don't screw things up so much, we just have to make sure that we're transitioning it. So transition, transform, what was the timing? And this is actually a nice use case for custom properties, because you can put transform speed here, right? And so it was 250 milliseconds. So here we can put the var transform speed and you can even change your easing function as well to make it all controlled just through this one. And then we come down and we do the same thing, transform is my var transform speed and we did ease in out. So that way, both of them happen at the same time. We could probably get a better function in there as well, like a cubic bezier that would be a little bit smoother. What if we just did, yeah, that's fine. I was gonna say we do an ease in, but I think it's fine. But now like if we did make it longer, both of them go at the same longer time. And if we did make it shorter, then both, you know, they follow each other. So that's perfect. And you can even do a calc on that, I think. So if you wanted one of these to like sort of be a little bit slower or faster but always keep a certain relationship going, you'd be able to do that. So there we go. I think we did a pretty nice job. So let's go take a look at theirs just to make sure and let's double check, we'll refresh the page, close our DevTools down for a second and just see, you know what? I think there's a little bit different timing functions going on based on how that's working. And I think, so let's try this a little bit more to try and match it. Let's do like a one point, maybe a 1.5 REM just to pull up the head a little more. And that's where, let's try this and see if it works. We're gonna take this whole thing and we're gonna wrap it. So we're gonna say calc and then we're gonna select the whole thing, wrap it and do like times 1.2 to slow it down a little bit. So it's a little bit longer. And we sort of get like more of a double effect going on there. I think the easing functions could be improved. So one of those cases of inspecting, seeing what type of easing functions they're using just to make it, it looks a little snappier there's maybe even just doing an ease here instead of an ease in out or I think a cubic bezier one would be the best but we're not gonna dive into that world right now. Actually, that already looks better. So there we go. And if you enjoyed watching this and seeing how it got sort of the right bits of code and ideas that I needed without copying something exactly but to get the same type of effect. I've also done the same thing with the Stripe homepage where they have this cool text effect with a moving gradient in the background that the color showing through. And if you'd like to watch that the video for it is right here. And with that, I'd really like to thank my enablers of awesome over on Patreon, Jan and Johnny, Michael, Mr. Dave, Patrick, Simon and Tim as well as all my other patrons through their monthly support. And of course, until next time don't forget to make your part of the internet just a little bit more awesome.