7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.12 Subtle 3D Hover Effect

Hello and welcome back to Practical Web Animation. In this lesson, we're going to start a new effect but we're gonna use our last effect as kind of a starting point. We've created this 3D effect which looks really nice, but what if we want something similar but a little more subtle? In this lesson, we're going to start tweaking this effect so that when we hover over each of these buttons, we get the same or at least the beginning of the same 3D rotation but it's only gonna be a slight rotation. We're gonna see the original text start to turn up just a little bit and then we'll see just a faint outline of the of the bottom layer of that 3D block. And it'll be easier to explain just by demonstrating it. So let's go ahead and move forward. So the starting pen for this particular lesson will be the same pen we ended with in our last lesson. And you can find the URL for that starting pen in your course notes for this particular lesson. So once you open that up, let's go ahead and click on the Fork button to make our own copy, and then with our new copy open we can get started. So I wanna start by changing it up just a little bit. Let's give our background color for or nav a dark gray instead of green, just so that we have something a little bit different. So we've got a dark gray color and then we're gonna change the color of our buttons as well. So for a starting shade for the bottom part of the button that animates up, let's scroll down a little bit and find that. It's gonna be the after pseudo element that we have here. And right now, it has this dark green shade. Let's change it to a dark gray of 222. And we see that it starts at that dark gray shade but it quickly moves to green and we'll fix that in a second, but for the original button, you'll see it animates to a light green color which is this shade right here. This is the span inside the button. And instead of animating it to that light green color, let's animate it up to a lighter gray color of 444. So we hover over that and we see that it just changes to light gray now instead of green. And we've still got the bottom one animating to green. So, let's find the hover case for that and here's that background color. Now for that particular background color, I'm not actually gonna change it. We're not gonna be rotating this very much so instead of changing it to a new shade, let's just get rid of it altogether so that it stays that dark gray shade. So there we go. Now what I want to do is I want to get rid of the text on the bottom part of it all together. So it's not gonna rotate all the way up. It's just going to slightly turn to give us a hint of a 3D effect. So we don't need the text on the bottom of the button itself. So we can go into all of these data attributes, these data title attributes, and we can get rid of those. We don't need those anymore. So we're just gonna go into each one of those and delete them, and then in our CSS, we will also get rid of the content for that after pseudo class. So here's our content, we're setting the content equal to this attribute of data title, let's just get rid of that altogether. And in fact, we still need a content there otherwise it won't work so let's just give it an empty string, open and close quotation marks. So there we go, now our text is gone on the bottom of those. And now really all I want to do is make this a smaller rotation. So we're really not rotating anything, we're really just squashing the text as we expand the after pseudo element below it. And all I want to do is just decrease the amount of that squashing and stretching. So let's come down here to our hover effect for our after pseudo element, right now we're scaling it all the way up to 1. Instead of that I want to scale it up to a value of 0.15. So it's not gonna scale up very much. When we hover it now, we can see that as the top animates up, the bottom is just animating up a little bit. So now we need to fix the top animation, so let's scroll back up a little bit until we find the hover for our span. And so we want the original portion of the button that has the text on it to make up the rest of the difference. So if our pseudo element here is being scaled to a value of 0.15, we need these two values to add up to 1 so that it takes up the full height of the button itself. So if we take 1 minus 0.15, that's gonna leave us with 0.85. So let's scroll back up to our scaleY here. Instead of scaling our top portion all the way up to 0, we're just gonna scale it a little bit. It's gonna start at 1 and it's going to scale down to 0.85. So it will still be 85% of its total height. And now when we have are over buttons, there we go. With very little effort, we've made a new effect here. Now one more thing I want to do to this to kind of improve the effect a little bit is I want to reduce the size, the width of this bottom portion. So I'm gonna come down to this after pseudo element here, and here we've set the width to 160px. Well I'm just gonna change that a little bit. I'm gonna reduce it by about 4 pixels so we'll bring it down to 156. And now when we hover over it, we can see that it's still flush on the left but it has moved over on the right and that's not what we want. We want to center it. Well, in order to center it, all we need to do is nudge the left position over a little bit. We've reduced the width by 4 pixels, so we need to nudge it over, half of that, or 2px. So by changing this left value to 2px, and bring down the width by 4 pixels, that should center it for us. And now when we hover over it, we see that it is centered. So it's not all that different from what we had a second ago, but it's just enough to help with the illusion that this is a 3D effect. And it looks really nice. So by just making a couple of small tweaks, we were able to come up with a totally different effect. And as always, I want to encourage you to play around with these numbers a little bit. Play around with some of these effects we've been creating over the course of this series, and come up with different ways to tweak them and come up with animations of your own. So that wraps it up for this particular lesson, let's go ahead and save our changes and we'll move on with the next video. Thank you for watching and I'll see you then.

Back to the top