Really fun CSS hover effects

Key Takeaways

in this video we're gonna be looking at using transforms and specifically transform origin to do really cool and fun stuff like this and I think I maybe it's just me but I think that's that's pretty cool hi there my name is Kevin and welcome to my channel where we learn how to make the web and how to make it look good with weekly tips tricks and tutorials you're new here I just I love CSS I love having fun with CSS I love pushing and doing cool stuff with CSS and I really want to instill this love of CSS and everybody like I want people to realize that it doesn't have to be frustrating and in this video I do a lot of things where we can see that there's problems you can run into that are really easily solvable if you really understand how it's working because we're using transforms and transform origin but we're also going to get into the deeper things with a little bit of stacking context and just how pseudo elements work I sort of glossed over those a little bit but I mentioned throughout that I have other videos that do deep dives into them so but we you'll see a little bit of how they're working as we're going through it all because those are the types of things that can really solve your problems and make CSS fun because you understand how it's working and just help you level up your CSS and I think it's gonna be a really good video we're going to do some cool stuff with it before we get to that cool stuff though I just want to say a really big thank you to Skillshare for once again sponsoring one of my videos if you don't know about Skillshare how do you not know about Skillshare Skillshare is you know I'm sure you've heard of them before whether it's on my channel or another one or just through your friends telling you that Skillshare is awesome because it's a really cool platform to learn on you're watching this video because you want to learn something so that means that they're the right place for you as well don't leave here and went I still want you to watch my videos but they have a lot of really awesome content over there as well they have stuff on CSS I've talked about Rachel Andrews grid series that's on there but also a lot of people here always want me to do more JavaScript they have lots of courses on JavaScript whether it's specific for beginners they have some advanced stuff they have all sorts of JavaScript goodness it's a massive huge learning platform it's not just about coding it's about a whole bunch of other stuff I've done a whole bunch of photoshop classes like I mentioned last time there's illustrator stuff there's how to run a business stuff there's just lots and lots of things that you can take advantage of not only being generous by sponsoring this video they're also being generous by giving you a two month free trial to check it out and see what type of awesome stuff is in there that's how much they trust their product um so you just have to use the link down in the description below and be one of the first 500 people to do so and you get those first two months for free so you'll finish watching this video don't run off right away but when we get to the end I'm going to give you a reminder click that link and get your two three months so thank you very much to Skillshare now it's time to start talking once again about transitions and transforms now if you're not already familiar with transforms and transitions I'd encourage you to check out an article that I wrote a little while ago is a few weeks ago maybe a month ago now where I took a look at just the basics of it and there's actually a video embedded in that using a cool platform called scrim because it just worked out really well for looking at the basics of transform so if you're not familiar with transforms check out that article that's link in the description below it's going to go through the basics of how transforms work and again there is a video that in there if you're not a reading person you're more of a video person just scroll down a bit and you will run into that video but that's just going to sort of get your feet wet but if you already know how transforms work but you're just like well how did he do that stuff in the intro and what I want that well that that's you're in the right place because we're going there right now all right so I already you do have some styling here as you might notice and what I've done though is I have included a link in the description below that has the exact starting place I am here so if you want to follow along you can I just did this to help speed things up so you can really focus on those transition effects that we want to be doing so the very first one I want to take a look at is these little links here because that's really gonna lead into everything else I ended up doing on here and we're gonna do a little zoom in on this we can make this a little bit bigger for we're doing just to make it a little bit easier to see so I've created these fancy looks here for you fancy looks fancy links if we come to my code you can just see I just have a class fancy link and all I've done for that so what we can do on these fancy links is I want to add a pseudo element to them now if you don't know what pseudo elements I'm going to be using them a lot in this video I do have another video or have a three-part series actually that does take a look at pseudo elements in a lot more detail and there should be a card popping up for that now so I'd encourage you to check that out first and then maybe come back to this but I think you could follow along either way so what we want to start with is our fan I gotta spell it right fancy link and I want the after pseudo element on there and I'm gonna be using a display of absolute on here so that means I'm going to come up on the original and do a display of relative just to make sure that the positioning of this is relative you know it's seeing it positioned within reference to the original link and not of the entire body which would happen if I didn't have that so with that I'm going to start with giving it a content because we need to have content on a suit element or it will never appear and then give it a position of absolute like I just said next we want to set it up so let's just do a left of zero I'm gonna do with 100% I'm gonna give this a height as well of say two pixels so it's big enough that we can actually see it and I'm gonna give it a background color I have current current color like that because then it's gonna steal the text color whoa look at that clearly did something wrong I display relative here instead of position relative which is something I do all the bloody time we can actually see that sort of fix things a little bit so my left of zero is working I'm also going to say a bottom of zero not sure why it went so far down but that's why I'm the position absolute does eventually get us to the right place there so we have these underlines that are coming out underneath now what we want to do and I'm not going to do the entire things I want to sort of explain how this is going to work but I'm going to put a scale on here but when they do scale you can see I have scale we actually have 3d scales and X Y and z-axis and for this I'm going to use the x-axis and I'm just going to put a point five for a second so you can see what it's actually doing so I'm gonna hit save on this and you can see it shrank down to half of the original size like that so that's really cool we can control the scale on the X or the y axis so why we wouldn't be able to see cuz it's really small we're gonna play around a little bit or with on the regular scale the scale X and the scale Y when we get to our buttons here I mean see it has scaled it down so now what I can do is transform origin and set this to left so right now it was shrinking in the center it shrank on this side and on that side or it scaled down now if I do a transform original on the left side you can see it is switched over to only be on the left instead of group so if I make this a bit of a smaller number it's always sticking to the left side whereas if I don't have this it's always going to be stuck in the middle so really really cool and now what we can do is our fancy just move down a little fancy link hover after and what we can do is transform scale X and put it up to one so now when I hover on top you can see it's going to the full size now it doesn't look so good when we do that so I'm going to come back up to my regular fancy link here and I'm gonna add in a transition for a trans form we'll say 250 milliseconds and we'll do an ease in now one of the other advantages with this is scaling is a nice performant way to do transitions let's just save that yeah there we go we can see it's working i'mso transforms or scale is one of the more performant options we have for doing transitions so you could get away with doing the same thing here with playing with your left and right positioning you know the left could be or the right could be at 100% and then we could have it grow and shrink but this is actually gonna be a little bit better for performance so we can see it is growing and shrinking but what I did is my original scale X was actually to zero so when I do that it looks like there's nothing but then when we come on and off we can see it growing and shrinking away so that's a nice start but um you might have noticed in the finished version we can go look it comes in but then it leaves on the other side which i think is a lot of fun so we can do that same thing we can have it come and go on different sides but what we want do for that is come and change the transform original hover origin I want this to start I'm left so this is when I hover I wanted to start on the left and move toward the right but then when I take it off of hover I want it to switch so I want it to move toward the right when I move my mouse away from it so let's go and check that out you can see it moves in but then it's moving off in the other side so you get this cool little like sneaking type of action I think it looks really fun and really cool the one thing is you will notice it a longer link it does go a little bit faster and with a short link it does go a little bit slower there's nothing you can really do about that because it has to do the entire thing in 250 milliseconds so if it's really long it's gonna have to go really fast and if it's just one word or really I go the letter A or something it's gonna go a lot slower because it has less distance to cover but I still think it looks pretty awesome and I really like that effect so we can use the same principle to worry about our buttons over here and because we can use the same principles here what I'd encourage you to do is hit pause on this go to those files that I've given you in the link down below set them up so you're using my starter CSS and see if you can do it on your own from what we've just learned because I think putting it into practice will be a really good thing to do once you've done that you can come back or if you get stuck along the way you can come and see how I did things at the you know how how I ended up doing it whether you managed to do it if you want to see I did it differently or if you just get stuck and you want to see what I did to get past whatever is blocking you so I've already done a little bit of basic styling on my buttons just so they don't look terrible but now I'm gonna come down and here I'm just adding my my margin in between those buttons let's come down and actually start doing it now for my buttons there's a couple things that are important is they all have a class of button but I have my button one button two and button three so we can do things a little separately as well so I'm gonna start with is my button after and once again we do have to give this a content and position:absolute I'm gonna give it a width of 100% because I want to be the full size a height of 100% because I wanted to be the full size now height is a funny thing is normally will calculate based on the width of the parent but if it's position:absolute it will actually use the height of the parent then let's give it a background color I'm going to do RGB I so we can actually see it now I'm doing RGB a and let's do like a 0.5 or something because what that's going to do is in C it's going to keep the color of my box a little bit so I don't have to come up with a dark orange shade I can just use an RGB a value and get mode you know it's gonna darken it by itself now the problem is they're gigantic because I forgot on my button position I didn't do display this time relative and now the real they're the same size the only problem is they're not positioned properly so up in here and say top 0 and left 0 so they should be lining up right on top now the only problem is they're also on top of the text and you might want to show you in another video - what I'm gonna do one here is I'm actually Ava's at index of negative 1 which is going to push it to the back but the problem is it was in the back of everything it's now hiding behind this white box over here interesting thing though is once you've given something a position you can give it a Zed index so this is position:relative I'm gonna give this is at index of 1 and hit save and now my black borders where I want it to be and he might be going what just happened as soon as I give my button a Zed index it's giving a new stacking context so this negative one is now within this button and not within the page in general anymore so cannot go behind my button because it's living in my buttons stacking context and if that's really confusing to you there is a card popping up now or soon that will pointing to my video on stacking context because it's an important thing to understand and sometimes once you know how to manipulate it can make your life a lot easier because if this is confusing I would encourage you to figure out how is that or how stacking context works now obviously I don't want them to fill up the entire space like this so what I'm going to do is let's come on and you might we'll start with one of them at a time so we'll do my button 1 before I did after not before and we can control the after on this one that separately so we can do or transform scale x won't stick this one the same as what we did on the last one I'll start with 0.5 just so we can see that it kicks in I can say that my trends form origin transform origin is left so it's growing up the left side and then just like before we can do my button one hover after has a transform scale X of 1 so when I hover on top we can see that it is working it know what I'm going to do is instead of having to do a transition on my button mine my button to my button 3 I'm just gonna come up here on my button after so this is for all of them and when you put my transition on here so transition transform will say 200 milliseconds this time and an ease in and now we can see we have my little animation there but just like before I'm gonna switch to that whoops not a 1 and want that to be a zero and now we can slide in and out or we can do just like before where this was right let's just copy this whole line of code here and paste it and switch that one over to left and now it slides in one side and goes off on the other like that so nice and cool so we can take a lot of the same things here and I think what we'll do is actually just copy this whole thing and paste it but switch these two over to a button too so with the button to instead of doing a scale X I'm gonna do a scale Y so X is on the x axis so we're scaling our box actually you know what I'm gonna do yeah let's do that the only thing is now we're working up and down so this one I'm going to switch to top and this one I'm going to switch to bottom and hit save and now it comes up and then that way and actually I think I'd like that if it was the other way around more bottom and top and there we go we can have it come in on one side and go down on the other side so I think that's pretty fun that we can do sort of two different effects like that and the last one we'll do here so that would be we have it all saved already so this will be my button 3 so my button 3 this one I can just do a regular scale like that so I'm actually going to put this still I got point 5 take that off for a second so this scale point 5 it's gonna scale on the x and the y axis and take that off so you could even have it grow out the middle like that if you wanted to so you can see that I'm scaling both ways not just on the X or the Y but I'm doing both whereas if this was scale X it's only shrinking it one way and if it was scale Y you can see it's only shrinking it the other way so if we just do that it's doing both at the same time so if that was a zero we can have it grow and shrink right from the middle because the default transform origin' is Center so we can have it growing and shrinking from the center but we could take advantage here and we could do a I'm gonna say bottom right because this is where it's leaving from and this is where it's entering from so this could be a top left I'm hit save and then we can have it come in and leave on the diagonal like that not my favorite I think I like this one the most but you know go with the one you think or play around with it you could definitely don't have to leave you definitely don't have to leave it at that you can do a whole bunch more with this I think all right so that is awesome now it's time to get onto the really fun one I know that we have our little buttons there done so just really fast I haven't done very much in our card here you did a margin bottom there too so I could scroll down but on my class I have my content card I have my just a card title a card body nothing too fancy just in case you're asking this is with the BEM naming convention which I have done a video on so it's why I have a double underscore there because they usually get questions about that so nothing too fancy apparent h3 paragraph and nothing else going on and what we want to be doing is making so we have a little thing like that so I think that's pretty fun and with this we're gonna have to explore one other thing it's not done just with transforms well it is done just with transforms actually but it's also has a little bit of extra in there so once again I'd encourage you to see if you can figure out how to do that or how I did it so pause the video jump into the starting file that I gave and see what you can do with it and if you can manage to figure it out but then when you get stuck you follow along or if you meant to finish it and you want to see how you I did it differently you can check that out as well um so you can see here I've already have my card has some padding on there has the background image my background image I'm just using a random placeholder form on splash it so I've also put a background color with a background blend mode because without that probably won't be able to read the text so there you can see I can't read the text at all so that just takes I'm blending the background with this dark red color and multiply keeps the darkest pixels so you can see it's darkening and all there I left the card title here empty just have to remember to this is where we want to do most of our work at the beginning anyway um and at the very beginning I think I don't actually need we're gonna come back actually no we do need to do one thing is once again we'll be using pseudo elements so position:relative it's almost a master class as much in pseudo elements here as with the transitions so one a couple things let's come down and do my card title after as you probably guessed and once again we need a content on there with no content in it and I'm gonna give it a position of absolute will give it in this case I want the height to be a little bit more like I don't want it to be flush with the text I want to be a little bit bigger so with the top of like negative 0.25 and I'm actually gonna use REM usually I use M for this but we'll see why in a minute and I'll explain my decision to use REM here and actually yeah you'll notice here on my card my padding I also sit with REM so if you saw a last week's video where I looked at the difference in m and REM so if you're not sure about those that could help you out but I do say usually with padding margins I'm using Em's but in this case the REM is going to help us out as we'll see in a second we'll give this a width of 100% to start with and the background is my that orange color which just happens to be e six three five two let's see do we get anything with with there it is so top is there let's give it a left of zero just so now we're running into that same problem that we ran in before so I can do a Zed index index of negative one on this to push it backwards but now it goes behind everything do you remember how to fix that here where I set the position of relative that means I can also set a Z index on here index of 1 and the number here doesn't actually matter about what matters is I'm creating a new stacking context which now puts this negative one can't escape both side of my title it's just all the way in the back of anything that happens to be in here now what I want to do is I actually want this to start all the way flush on the side there and because my padding is set to two REM I know that what I want my left to actually be is negative two REM so it should pull it perfectly flush that's perfect the other thing you'll notice that the width I actually want it to be closer to the total size of my text so instead of a width of 100% we can do on here is use it calc and on my calc what we can do is 100% plus Oh actually one thing I'm gonna change here too because 100% it's doing 100% width which is it's a block level element so even though it's a short text it's taking up all the space so if we come on to my card title we can also give this a display of inline block so that 100% is based on the content and not based on the size of the parent so then this 100% and then we can add a little bit to this so I added to rump to this side so just to balance it we could do plus 4 R M so now I have 2 REM on that side to R M on this side right there and it balances out pretty much perfectly so that is looking pretty good but obviously I don't want it to be stretching that whole size just like that we want to be a bit smaller so we can use my transform and you guessed it scale scale X I'm going to do it at like a point 1 let's see what that looks like probably pretty good we're stuck in the middle so now my transform origin would be left there we go so it's on the left like that and actually that's pretty good maybe this could be like half that I don't know you could play with the number a little bit to get exactly what you want won't go with that one so it's sort of highlighting my title which is which is nice but we want it whenever I hover not only on the title itself but if I hover on the card I do want that to grow so we can come here and say card hover card title after and what is it we want to change we want the transform scale x1 let's see that out there we go boom and it's anywhere on the card I hover it's working we just need to add in our transition to transition the transform 250 milliseconds ease in let's see what that looks like perfection I think that looks pretty good now the real fun part comes with this text here so we want is that gross out once that stops the white part comes and reveals this text that's underneath so a few little fun things we can do for that so first that's my card body so the first thing is I'm actually going to choose my color I don't want to use black or a dark color because we can still see it right or even I said we add the 3 through 3 on there but I can still see that it's really hard to see it's getting pretty close to disappearing but we can do one step better and say it's transparent so it's literally invisible and we can't see it so that's the step number one but I think actually before we keep going I'm going to leave that as transparent for an hour just because I'm going to leave it off I mean while we style it but that's what we're going to be doing so we can turn that background in a second after content is not a position once again is absolute position I spelled it right that means my card body needs a position of relative and then we want to position it where we need it so let's just do a top of I'm just going to top:0 bottom:0 left left of zero and up whatever right of zero background is white okay good so we can see that it's live there which is nice once again we need to mean back so that index is negative one we need a new stacking context so we can come back up to here is that index is one there's other ways of creating stacking context it's not just through Zed index but again if you want to know more about that check out the video on there actually let's just make sure we can see my text black okay so we can see the text so that's a good sign now one problem I have is this giant space in between them in general I think so let's come on to my card title itself and set a margin bottom of one R M so I know exactly what that is we still have too much card body I'll just give it a margin of zero make it a little bit easier there we go so we know so my top my top here my top it's not going to be one because I can probably tell that space negative one I think is going to be too much because you can see it's overlapping a little bit it's overlapping because I have my bottom of negative 0.25 here so we're sucking down by 0.25 so we just have to make that point seven and I think there we go it'll line up perfectly if I'm doing that on the top I want this same thing on my bottom just to balance everything out that way I think it's ugly that it's touching here so on the Left we might as well just stick with the same number and this is we're having like a custom property could come in handy but I just made all these changes ooh I don't like that they're the same oh it won't matter cuz this is gonna disappear well it's all good it's all good and the right zero I think is fine or actually any your custom property would be get there just we have like here this space this space in this space all being equal I think looks a little bit nicer so we'll stick with all those being the same so once again I can move my zip index and let's do our transform scale but this time do is scale Y just like with this button because we want it to be going moving up and down so scale Y will be zero so it should disappear when I hit save they're super and then when we card hover D card body after transform scale y1 there we go so now we need a transition on that transition transform 250 milliseconds ease in and transform origin top Wow look at that it's already pretty cool I I like what it's doing but we want this to grow and then we want that bottom thing to sort of slide out afterwards because I think that makes it a lot more interesting so the way we can do that is we use a transition delay so I don't want the this transform to happen until this one on the top has finished so it's actually really easy to do I'm gonna keep this here with my transition we can add you can do a transition delay like this with its own so it would be 250 m/s because I'm not worried about this timing is nothing do that it's going back up to this one here so I'm looking at the or when the orange box is growing it's taking 250 milliseconds so it's saying when this finishes pretty much we can start that one there so let's save that and see if it works there you go cool all right now if you want to the transition delay can also come in I think it's yeah yeah there we go so you can add it all in with the shorthand here instead of having to have a whole bunch of properties so that's cool now the only problem as I said we can see our text even when we are not when it's not there before it's supposed to come in we can still see the text which is a problem so we can come back up and where's my so we can come to here and make this transparent again so I hit save on that so it disappears and my card I guess we can do it right here card body I know card dududu I'm actually going to leave that there and we'll do it right here card hover card body color is black I guess we should stick with my it's still dark enough it's still nice and high contrast we'll go with that one so right away that's sort of working but the only problem is now when I start if you have really good eyes let's make this red just so you can I think it'll make it a little easier to see as soon as my mouse goes on top the text appears and as soon as my most leaves it disappears so it looks a little weird right so let's go back to 3/3 and you can see it even though it's super subtle but it's really obvious when I'll eat my most leaves that it's disappearing so what can we do to fix that it's not that complicated and what we can do is actually and this is not as performant as I was sticking with everything else I was sticking with transitions that are performant which is on the scale you can also do opacity and as it rotates but color isn't necessarily the most performant but hey we can cheat a little bit here it's not something I don't think they would put a big slowdown and if it doesn't run it as smooth 60 frames per second no one's going to notice any which when I think on most people's computers this won't cause any issues and so we want to actually transition this color so transition color and let's do it a little bit faster 150 milliseconds and I'm that doesn't really matter what easing is out because we want it to be a little bit hidden so you can see it's sort of glowing in and glowing out now like it slowly fades out when I my mouse leaves which is really really cool but I'm also gonna add in a I don't know should I do a whole 250 millisecond delay let's see what happens that works out pretty good actually what if it was actually longer yeah I look at that that's even better the reason that's working is cuz is because the delay it's this is running when I first go on it's 250 milliseconds for this to go out and then the other ones starting and that's so it's we're starting this one so we're starting this fast transition after 350 milliseconds so it's after this has started to come down and then when it starts coming up it is taking if you had really good eyes I'm sure if that was actually read instead maybe you'd see it a little bit but the colors blending and enough that we're not noticing it if we really needed to or if your text was standing out you could set that to 250 and it would disappear just at the perfect time as well but it's already faded off enough and with a faster transition I think we're sort of making up for the difference along the way and there we have it I just I had fun doing that that was a one of those videos where when I was planning everything out and just playing around I got a little frustrated or first cuz I didn't know and when there's too many like let's just look and that's sort of when my article wasn't looking at the basics of it so like oh we can rotate something around that's cool but how do you use that in real life and so I think here we're getting a better idea of how we could use it in real life and that's always a good thing that's what I want to do here and I hope you learned a little bit along the way and saw what I meant by it falling in love with CSS I just think things like this are so cool the type of stuff you can do is so cool and so fun and when you know how CSS works it's not hard to do so if you did like it if you did learn something along the way please let me know what it was in the description below if you've already done a cool project with transitions or transforms because I keep saying transition when I should be saying transform if you've done cool stuff with the two of them together or whatever it is leave a link down there and let me know about it because that'd be really cool to know about and learn about on another note I'm going to strongly encourage you to also come and check out my newsletter um so there is a link to it in the description below I think at the end of the video it's gonna show up in a little box as well and my newsletter I've transformed it a little bit it's so you can keep up to date so I'm sure you're subscribed you're subscribed here right you've clicked the little subscribe button but even when you're subscribed you miss videos sometimes and maybe you didn't know I had articles and you heard me talking about that at the beginning oh crap Kevin Kevin is doing articles and stuff like that too cool so if you never want to miss out on any of that subscribe to my newsletter the link is in the description below and then you'll just every week once a week one email only every Sunday you'll get a nice little recap of all the stuff that I've been up to and if it sounds cool to you just click the link in you to watch my video or read my article and that that's it just a nice way to keep up to date with everything I'm doing in it I try every now and then to throw a little bonus quickies in there then we're fun because say thank you for being part of my newsletter and speaking of thank you thank you so much for watching this video all the way to the end I hope I really do hope that you liked it also a big massive huge thank you to my patrons for helping you support my channel and everything I do here with a bonus shout out to john Lauren and Fernando for being my supporters of awesome you guys are amazing thank you very very much that is it for today thank you one last time because I'm all just exploding with thank-yous right now and of course I look forward to seeing you next week but until then don't forget to make your corner the internet just a little bit just a little tiny nothing a little bit more awesome