 Hi there, my friend and friends. Sometimes we just come across something that looks fun or cool, and we want to see if we can make it. And one of my favorite series to do here on YouTube, which I haven't done in a little while now, is to make something from scratch completely on plan. So you can see sort of my thought process and creating something, how I managed to troubleshoot things when I run into problems and all that good stuff like that. And we're going to be doing that by trying to recreate this fun, kind of cool hover effect that I recently found over on CodePen. This by Gann, and the code, the original CodePen for this will be linked down below. As well as all of my code on how I try and figure this out. So let's jump right into it. I'll show you a little bit. You can see this is the effect. Once again, I have it here. I'm not going to... I'm going to try not to look at Gann's code to be able to do this. I'm just going to try and do it on my own, and I got a few pictures to be able to do it. So this will be my background image. This will be the front one of appearing on the front like that. And then I also found this Yoda Star Wars logo that could work for the bottom part here. Yeah, we're going to see what we can do with it. And do it. The colors on this might be a little harder to work with, but we'll play around and see what we can do. I usually do these unedited, but I'm going to try something new with this one where I will edit things, but just to like keep the highlights and not the parts where I'm just staring blankly trying to figure things out. So let's jump on over to my index. And the first thing, obviously we need, let's just do... We'll just call it Yoda. It's our card, but you know, it's a one-off. When I do fun things like this, really doesn't matter so much on that side of things like class naming and stuff. It's more about the experimentation and trying to figure things out. I'm probably going to do it... I guess that would be easy enough to have it as a background image. I'm just looking at the shadows I see around there too that we're going to need. That I guess would be a pseudo-element. That could even be... It could be a pseudo-element and it could be another background image, but doing... We can't animate background images. So I think it'd be a pseudo-element with a gradient on it, but we'll see with that. So I guess we do need the logo and we need this guy. So we would have my dot logo and the other one, I guess. And I don't know if these would have to be divs, but I'm going to do them as divs and then put the images inside them. I don't even know if I need to... Let's try doing it just as images then actually. So let's just do image times two. And yeah, I'm not sure if it would be beneficial to have it in a div or not. So let's say a class on the first one would be my logo, like I said before, and then the class on this one is going to be... We'll just call it front image just to make it a bit more clear what that one is. The other thing with this just really fast... I'll bring the actual images on my own version in in a second, but if you look at Gyan's one cool thing with it, like here they actually... The cape was like cut to the side. This one, the sword and like the cape on that side are... I'm not doing that with my Yoda, but that's just really like how you could do it. But I think maybe I'm wrong. Maybe we'll look at his code at one point to see, but it could be using either a clip path would work if the image is too big. So maybe we'll try and do that. If part of our image goes out, we'll see if we can clip it rather than having to do it in like image editing software. Awesome. So with that in place, you can see we were here just really quick. I got the images actually brought in and they do have a little bit of CSS here, but nothing too much. Just a max with them images, placing everything in the middle and a color scheme dark. So the background is dark by default is basically all we have there. And I put the Yoda, which was our class here for the entire thing has the... I put a width of 350 just so we have a space to work with. Maybe we should throw an outline on there just so we can see three pixels solid lime green should be a fit with our style. We'll turn that off a little bit, but just so we can see what we're working with. And I think what I'm going to do here is an aspect ratio of 16 over 9 maybe. And right now that's not working. I think just because the images are there. So it's stretching to fit despite my aspect ratio, which I wouldn't expect actually, but that's not really going to matter too much because those two things, let's come here and do a position of relative because everything inside of it, so dot Yoda and all the children will get a position of absolute. And there we go. The 16 over 9 is working, but I probably wanted 9 over 16. So it'd be taller, right? And I'm just thinking like this looks roughly like that type of aspect ratio there. And it just so happens it looks like it fits the Yoda picture perfectly, but that's sort of random luck. Like if I made this a bit taller, right? So that's good. Let's bring the... Let me think here. So the main thing is we only want Yoda to appear. The interesting thing here and this is the part I'm not sure about is the card's going to tilt back. Let's just put an opacity of zero, opacity of zero on those. And yeah, so I definitely want that to tilt. Let's bring in my background image. So there's my background image coming in and you also notice my line numbers disappeared. I realized I was on the wrong profile for recording. And so just to, you know, I just brought in a background image and we'll also come in with a background size of cover. And the problem with this image is the background position isn't great. Position is, let's just say... What if I did the right side? No, that's even worse. Okay, I'm going to have to muck around here and just to get one that's perfect. So I'll see you in a second. All right, there we go. Just a negative 150 and he ended up right in the middle. So that is perfect. And then we want that hover effect to make it tilt. And I'm not sure on this, but let's try it. Yoda hover and for this, we want to do a rotate. I don't know if it matters if we use the Rotator or if we should do it with a Transform. Let's just try rotate of 30 degrees just for fun. So that does that. So here what we want to do is specify the axis. So rotate on the Y. Oh, no, that's, we want the X, X. There we go. The only problem with doing it like this is it looks like if I do like, I don't know, 75, it just looks like it's smushing down, which isn't what we want. So I think what we need to do here is add a perspective. And I always, I never know what perspective to add to something and... Or no, no, sorry. The perspective is going to go on the body. There we go. So by the body having, it always has to be the thing outside of what you want to actually be rotating. So that sort of sets the scene. So our camera is now a thousand pixels away from the card. So now it actually lives in like a 3D space. So that's working, but obviously we don't need that much. Maybe 30 degrees, 35, something like that. I think would look pretty good. And we can also just come here and then we can transition that, transition the rotate for, I don't know, 300 milliseconds ease. Just we have something, right? There we go. Perfect. Next, let's come take a look at his again. This is a lot slower. Oh, we have a shadow that appears underneath too. There's a lot of good stuff going on here and not all of it I realized. So let's bring this up to like 700. I don't think it's that slow, but it was definitely a lot more. We could have a better timing function, but I think that's okay. And it's probably a little bit smaller. So maybe we will go 300. And then this could be like a 15, 12. We have to play with our positioning now. I think we'll just stick, even if it's not exactly the same, it's okay. And we don't actually need that outline anymore because we have our card. So let's get that shadow coming in. So I'm actually going to do the shadow using a pseudo element. And the reason I'm using a pseudo element, we're just doing my after for now, is just for performance reasons. It's a better way to create shadows and stuff. If you need to animate them. It's just higher performance because animating shadows is really hard for the browser. So let's just say that this is going to be the content we need them position of absolute, right? And then we're going to do an inset of zero. Now what I'm not sure about, let's just make the background red so we can see it. Negative one. So it goes behind. Oh, no, that's going to be a problem. The reason this is happening is the, when we do it transform or any of the transform properties which rotate, even though it's its own property now it is one, it creates a new stacking context. So right now it is behind. So here, if I did a inset of negative, well, let's make it really big 100 pixels. It's behind because of the negative Z index, but then it goes in front because of the rotation that's going on there, which is really annoying. And it's one of those things that definitely gets you when you try and do transitions on different stuff. So that's not going to work. So maybe not the best solution, but Yoda is going to come in here instead of being a background image. So let's just say Yoda, Yoda BG, such be an image, all right, dot Yoda BG. So now I brought Yoda BG in here as an image, but it's probably, I turned off the background image. It's probably not going to show up though. So let's turn off this. And the reason it's not showing off is we have everything getting the opacity of zero. So I'm actually going to switch this to my Yoda. Was it Yoda? No, it was just my logo and my front image. So the logo and the dot front image, we'll get that. That means that my, I called it Yoda front. Let's just make that a bit more consistent. We'll just call this BG image. And that means here this, I'm going to remove and my dot BG image. We'll get these as objects instead, object fit of cover and the object position, which means I don't really need this to be a position. Absolute. I'm wondering if I need to bother. I might just be able to do height 100% and we should be okay with object fit cover. And then this becomes object position. There we go. We're back where we were. The advantage now is I think our red will always stay behind and then we don't actually need. Oh yeah, we're using position absolute here. So what I might do here is actually just to make it easier position absolute instead of worrying about negative Z indexes. I'm going to position absolute. What did I do here? Z index, Z index of 10 instead of worrying about negative Z indexes, which sometimes can be kind of messy. We'll just layer things with Z index on this. So this will actually become black so we can turn it into a shadow. Let's just do a filter blur on it because it's easy. And I'm going to go with a pretty big blur. Probably way too big. So we can see it's there, but now in inset what I'm actually going to do is an inset of like 100 pixels. No, let's say 20 pixels and then we're going to trend and I could you insets doing top, bottom, left and right and bringing it in. So I could just move my bottom down, I guess, but I'm just going to transform it down. So translate we want to move it down. So it's going to be a zero on the X and I don't know negative 30 is negative up. I always get these mixed up. It is negative 60 sorry 60 positive. It's down. Let's make it red so we can still see it really clearly. So it's there and again, I could do this easily with the inset there, but I think it's more fun to do it that way. I'm not sure why, but so what we're actually and I guess for animating this would be better anyway, because the idea is that this will actually start here. Maybe what we'll do. Let's just make this inset like a 1.25 rem. And the reason I'm doing that is I want my inset to be a little bit more than the blur. See, we see a little bit of that shadow there, which probably isn't the end of the world, but just to try and bring it in enough. If we go to we probably lose it. That's it. We'll do with the 1.5. I think it's going to be super subtle. And then my Yoda hover. I should probably group everything. We could even use nesting. If we wanted to, I don't know my CSS will be a bit messy here because in general, I don't try and do things perfectly. I try and get them to work and then I would refactor this to organize it a lot more. So we're not going to worry about the refactoring. We're just going to worry about it getting it working right now. The after. Yoda hover after yes, we'll get a translate. We said about zero and then a 60 pixels roughly. So it goes down and then we're going to transition the trans translate 300 milliseconds. This is also where having we changed that. So because as soon as you do this and you have to have like I might change this timing function. Let's just do var any timing that makes sense, right? Timing and that way we can sort of have the same timing easily. We might find that we actually need to change it. But if that happens, then whatever eventually that does happen, then we change it will just do our timing here at 700 700 milliseconds. So there we go. I think that the rotation might be a bit too much. I'm not 100% sure yet. The other thing we can actually do like the shadow sort of just sliding out. His looks a lot better. It looks like the shadows like in. I think I'm just going to change how much it's going. You want it to look. I mean the shadow. The problem here too is the shadows actually rotating along with it, which we don't really want. I'm wondering if I could actually do rotate. What was my rotation on the original one rotate rotate where were we? Oh, here the X 35. So let's just grab this rotate that's right here and we can bring it here and this would be a negative 35. That's kind of weird. I thought that would work. Let's try one thing here on my Yoda. I'm not sure if this will work, but because the shadow is actually a pseudo element. It's a child of the Yoda. So I'm going to do a trans. I always forget what this is. Is it is it here? I can do it. No, how do I do this again? Um, I remember this. I mean, this happens, right? Preserve 3d. I know that's the transform style transform style preserve 3d. There we go. Sometimes you have to Google stuff and that's fine. Ah, so it is working. The problem is now what's actually happened is our card is going like this and the shadow is going like that. And because it's in the same 3d plane, it's piercing through and that looks terrible. So that doesn't work. And we went down a bit of a rabbit hole that I guess we don't want to bother with. Um, there might actually be ways of preventing. Oh, you know what I could do. Actually, I still think it would actually cause a problem, but I'm going to try it before we ditch this is instead of an inset of this, the inset on the top will be 80% 1.5 1.5 and 1.5 rem. So 80% is the top now. So if I do it, see what's only at the bottom. The yeah. So we're still getting the same thing because it's just rotating on a smaller plane. I might be able to move that where the transform is happening with the transform origin and prevent that because I could probably give it, but I think I'm fighting a losing battle. Um, and people who know more about 3d stuff are probably like, no, no, this is possible. But, um, or, you know, okay, we're trying one more thing. Just thought of that as I was talking, I could pull it backwards more with a. So instead of a translate zero, I'm actually going to do a trans or we could leave that and then do a translate a transform translate Z. And this is the interesting thing and it can be kind of weird, um, but let's just try negative. I don't know, 200, 300 pixels, um, and see what happens. Oh, see it. It's really muck now though, because the 3d-ness of it, I think this could work, but the idea with this is I'm actually pulling it backwards. So see it's there and then it sort of runs away. Um, I don't know why. Oh, maybe transition there. What if I did this as the rotate here to rotate of our timing? And so we're transitioning both of them with that help. Oh, it does help. So I don't know if this is perfect, but because it was piercing my card, I'm just pulling it backwards now. So it can't pierce it with the transform here and having the translates and a transform for a translate can be weird, but it just means this is always in place because I'm only transitioning the rotate here, the rotate and the translate. So I'm never actually touching the transform itself, even though this is a translate and that's a translate. It's kind of weird, but it can be handy having these as separate things sometimes. And now what I'm thinking is this maybe becomes bigger so we can see it a little more. I'm not even sure if this is a good idea or not. It doesn't really have the effect. I was hoping it would do. It doesn't match what his is. I'm going to shrink these because we pulled it backwards. I think it needs to be. Whatever. I'm going to leave it like that. We're going down a big rabbit hole and like a small part of the effect and now that it's black, I think it looks a little bit better. Ideally, it would actually be a little bit more like you'd see it growing a little bit as it's happening, but I think we're I think that's good enough for what we're sort of doing here and I might drop this back to 30 degrees. Okay. So I guess went down a long rabbit hole, but that's okay. These things are fun and it's, you know, we're mucking around trying to match something. So that's okay. Let's we want to get that cool effect coming in though, right? But the guy that pops up like that, but we also have the shadow effect on the back and that I think we're going to do with another pseudo element. So let's come in here with the Yoda before. And this is where like we could if I was refactoring this now, like we have double code for nothing because we're going to do a position absolute here as well, so we could definitely have like a comma separated selector for both of these. But then my inset on this is going to be zero and let's do it in the background of lime again and we have lime and lime green two different colors. Zed index this time we have a 110 let's just do 100 for now so we can see it and what I think I want to do is a background image and I often do this upset a background and then put the background image if I'm doing a gradient just so I can keep the color of what I want it to be and that should keep the color on there. So background image will be a radial gradient which I'm terrible with but we're going to try. It's going to be a circle. I don't know how big we want it to be so let's just try let's just say we're 350 300 wide. So what if I did 500 I want to be bigger and it's going to be transparent in the middle transparent and then we're going to go to black. And I think then here the transparent will go up to like 400 pixels. And maybe this actually needs to be bigger. Maybe I don't even need a size on it 300. Did I break it? Oh, there it is. Okay, that's sort of what I want but it's it looks terrible. But if we look here see I went like the corners darken I don't want that to have to be two elements. But if I turn off the line now it might actually be okay. And I what I think we'll do here is just put this at opacity opacity of zero and then my Yoda hover before we'll get an opacity of one. Right because we just want that to appear and we want it to appear slowly. So we'll do a transition of our. Opacity sorry had a brain fart there and we want to be my var timing. So it's coming it's a little subtle but I definitely see it. Let's just change the color here to red once again just so we can see you can see it come in and out now. So my picture is really dark to begin with. So the you know we don't see it as much and that terribleness of it though sort of isn't as bad as we had and definitely see it is darkening up on the top. Maybe I'll make this actually like 150. I don't know if that's too exaggerated or not but we'll go with that. You sort of get the shadow coming in on the top and the bottom whatever I'm not going to worry about fine tuning that too much. We went down enough of a rabbit hole with that bottom shadow. Let's get to the fun part now of the effect of the guy coming in. So this is probably going to stay like that and then we're going to say let's do Yoda first so or do we do let me just take a look. Oh the logo is always there. Oh no and it's not in the 3d plane and neither is that I might know. Okay I think we'll be okay. I hope I didn't muck myself up by putting it all in the 3d thing. I might have been better off having a container that was doing that. We'll see. This is where things get a little mucky so logo will take off from I know what we'll do is this take off opacity zero and then we're going to come in with the front image and do an opacity of zero on that for now. So if we take a look my. Logo. Okay so let's just do the logo itself logo Z index. It has to be on the top so we'll do a thousand. There it is. Let's do a filter. Can we change the color this way brightness and we'll just do like a hundred percent. Does that not work one. I don't know how brightness works. What are the other filters we have I know I can do this brightness contrast maybe so I found the invert I'm just inverting the color of it it's a quick easy hack I ideally want to change the colors of this. Let's go in with a width width of 75% maybe so it's a bit smaller and then will this work margin inline of auto to center it no because it's position absolute but what we're going to do is an inset of auto for the top so it's going to push it all the way down the left and the right will get a zero and then the bottom will get like a one ram for now and that will also center it maybe that will be a two ram and the reason that's centering now is the width is 75 but we have the inset left and right so the left and the right properties are zero so if the space it has to live is full size and then the margin inline works so what I'm not sure about we're going to try this is where the rotation thing might go off the rails a little bit and it might have been better to separate these two things but we're going to see can I do a negative rotation if we do that it does but we do sort of want some depth in that anyway right we have a little bit of layering so and we don't want it to always be that though so but I'm going to start it there so it's rotated a bit so then here we can do our transform and that was the translate zed right translate zed what how far like let's just find out how far forwards we need to come before we're not intersecting so 20 pixels seems to be enough which is great and what we'll do is let's just make this our transition the transition will be for my let's just save our timing we'll just leave it on everything for now and if we're going to worry about everything like you know if we want to optimize that a little bit by saying what we're actually animating we can do that after so then we have my Yoda hover we'll have my logo and the logo will get these two properties on it oh it does work perfect so it's rotating at the exact opposite speed as the rest of it so it just looks like it's staying the same so if I take this and I put it here just for fun I think it's maybe more consistent because then the depth of it is not changing I'm not actually sure does that look different than if it's here very similar I think okay so because we're doing the transform and we're going to change that anyway maybe it'd be better or not doing it but let's also come here and to say translate why and it's going up by like one ram or something and I know I'm mixing pixels and rams and it's all a bit messy why is that happening too oh because we're going down negative yeah there we go that confused me for a second just because I think it just looks like it pops up a little bit right and I think we're going to make it a little bit smaller let's do a 65 percent hmm it really is just sliding up maybe I just need to do it a bit more we'll do the two my seven my okay my timing function see this is where I think we're going to drop this back down now so the problem is okay so I'm actually going to keep the Z the problem I see right now is the Z it the logo looks like it's actually getting bigger because it is moving closer toward us so now I just need to find in my complete mess of code here this translate Z should so the two choices we have I could break these off into how I was doing it before or I could just say that here this is at zero and this is at 20 so this one is staying the same so now it should look like it's moving up and down and not so much I don't feel like it has that same the timing function maybe could be changed on it a bit too it makes me feel like I don't know if it's part of the rotation part of my timing something feels a little bit off but I'm going to stick with it for now because I'm going to sort of use that same idea is really just looks like it's rising and going down I don't know maybe this does too and I'm just thrown off by the way my thing is rotating I'm not a hundred percent sure I'm changing I'm like what so this I wanted to change my overall rotation and this is somewhere we're having this as I changed that to 30 I changed the wrong one to 30 before I'm thinking I don't want my card to rotate as much now and this is where if I had it all as a see I sort of like that better now if I had this as a custom property it would make my life easier to make changes to it so we can put in the rotation which now is 20 degrees and the reason for that is just if I update one of them it can update everything at once rotation and these are the types of little things I sort of do as I'm working and I go okay now I you know I'm realizing that this would be better so here because this is a negative I just use a calc of negative one time or usually I do the other way var rotation times negative one what I would do now is I'm doing this really simply to I'm doing it like timing rotation these are probably not the best custom property names but they'll work for now and so what I would do normally is I would when I do refactor this to organize the code a little bit more and get it cleaner is then I would also worry about the naming of things a little bit maybe I make them cuss like locally scoped only or I give them more specific names so I know that it's for like this thing that I'm working on and I broke everything by doing this why is it broken it is rotation right that I called it a rotate let's just I called the rotation everywhere so we'll bring that there we go perfect so we have that going now we just need the yeah that actually I for some reason that feels better to me and now we need the Yoda to actually appear there's like a is there a delay or is it just a delay on the hover I'm not sure I don't think I'll go with the delay so it's just basically sliding up in the opacity going and the cool part is that it overflows at the top is why that I think anyway why it ends up looking good so that means that my Yoda hover dot front image and it's going to get an opacity of one and so we need to transition everything so we'll just do the same thing for our timing right and let's go look here so now when we hover the front image our Z index now Z index of 100 probably I have a thousand for the logo so there we go he shows up perfect except it's not transitioning why not is it oh so the Z index should be on this one so what's happened is that index isn't animatable so I think it is yeah he is fading in and I might change his timing function a little bit there but what was happening basically is the Z index isn't animatable so it just sort of would appear it's either or sorry it you can't like slowly move your Z index you can animate it in that it will go from zero to whatever number you put but it's instant so I think he was fully opaque and then just showed up at the front maybe I'm wrong on why that was looking like it did but I think that's what was going on so let's actually I'm gonna scale him up a little bit and I think I might just leave the opacity at one for now while I'm working on this and let's do a 1.25 and one of the reasons I'm doing the bigger scale that sucks my glows I would fix that definitely I put the max with the hundred and see this is where we might want to try and clip his thing so maybe I'll do a 3.5 I don't think I'm going to bother but I think a clip path we could cut that off and then let's say the we're doing that so I could say bottom zero no right bottom zero oh because we're scaling can I do transform origin of bottom yeah that's easier there we go because scale normally happens from the center I don't want to scale from the center I want to scale from the bottom so I don't have to try and reposition it and magic number is feet into the right spot so we're actually going to I think do something very similar here this is going to be different though but let's just see if this works dot Yoda hover dot front image and then put the opacity to zero let's just see what this looks like it's the right idea right except he's also going on top of my logo z index of a hundred z index of a thousand that's kind of weird we'll figure that one out hmm I'm not sure just for fun okay must be with I'm not sure with the turning and everything that's going on just because this is smaller I'm not a hundred percent sure or because the rotation is from the bottom I don't know but it's giving me the effect that I want oh I know why maybe that I don't think that would do anything though I might scale him down actually a little now to five I just sort of want him to pop up the top mostly so I'm pretty happy with actually how that's looking and I'm actually wondering if that just for fun if I do a transform origin it has something to do I think with the z indexing so I might have to play with my z indexes a little bit on this so let's take the front image off of here now that we know that actually does work and we'll put it the Yoda hover front images there I'm going to steal all of this and then just change some values in it so let's actually let's just try changing this translate zed here to see if that helps him stay behind it's so weird okay so I put this to negative 10 now and it seems to be working I honestly think maybe the transform origin is changing because he's rotating from his feet and with the scale coming in there's something happening but it works so I'm actually pretty happy with that I thought I'd have to play more with the timing functions on it it does seem to grow upwards but I thought I'd have to work on that a little more but it seems just it feels like it's doing what I want it to do as I'm doing that so I'm actually really happy with that I just noticed he's not oh because of the zed index maybe he's not actually on the bottom anymore but that's fine you know neither were they so yeah that's kind of cool I'm actually thinking let me just look at his card again maybe it's because of the images yeah I think we're okay actually there we go I think that's actually worked out really well and we we got a lot definitely needs to be cleaned up a little bit I think there's some things in here maybe there's some improvements you could let me know about or if you know about some of the things I'm not too sure about when I would clean this up I definitely go through my dev tools and sort of poke around a little bit to try and understand everything that's happening in here in a bit more detail to clean it all up but as a first draft I'm really happy with that I got the effect that I wanted to get down and yeah I think it looks really good so if you like this style of video where I'm trying to figure things out and it's not this clean polished type of demo that's ready to go and you want to see a bit more of my thought process and how I work my way through any given problem I have a playlist of other videos just like this one are right here for your viewing pleasure and with that I would really like to thank my neighbors of awesome Johnny Tim Simon Michael James and Andrew as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner the internet just a little bit more awesome