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

  • Overview
  • Transcript

4.1 Basic Image Hover Effects

Hello, and welcome back to Practical Web Animation. In the next couple of lessons we're gonna look at some image animations that you can add to your website. We've spent a lot of time talking about buttons and button hover effects and things like that. So I want to move on to give us a little bit of variety here. So again we're going to talk about image hover effects in this particular lesson. And if you look in this starting pen, which you can find the URL for in your course notes for this lesson. Let me go ahead and collapse the JavaScript. We won't need that. You can see that we've got three images here surrounded by divs, and these divs have a class of img for image, but they also have their own special class. The first one img-swipe, the second one img-scale, and the third one img-tint. So as you can imagine, we're gonna be looking at three separate hover effects that we can apply to these images. Now you'll notice I'm using a website here called lorempixel.com. You're welcome to jump over to that website if you want to check out what that website offers. Basically it's just an image placeholder website. You can set the width and height of the placeholder images that you're using with these values here, and you can even specify a category using this value here. Technics is what I've got for this particular category. Now you'll notice I've added a ?123 and a ?234 here. The reason I've done that is because if I get rid of those, then it's not gonna load three separate images. Even though the images it loads are going to be random, it's gonna load the same three random images. If I were to refresh this page and load the images again, you'll see it's another random image but all three are the same. So the only way to really randomize the way those show up is to just add question mark and then anything you want to after it. Here I'm gonna put 123, and then after this one ?234, ABC, whatever you want, just as long as they're different values. Now we've got three different random images loaded. Now if they're coming from the same category, you might have a pretty good chance of maybe two of the images randomly being the same. If that's the case, just refresh the page and they probably won't be. But that's just a little trick I use to get around that problem of loading all three of the same image. Anyways, regardless of how lorempixel works, the effects we're going to apply here will work on any images you decide to embed in your page. Obviously you're not going to want random images on your website. We're just using this for illustrative purposes. So for our first image here, we're gonna be using some of the same techniques we've talked about before for some of our button hovers. We're gonna create a semi-transparent swipe that's going to cover up our image when we hover over it. So let's come over here to our CSS and let's get started. Let's just jump right into it. So we're going to point to img-swipe::before. So we're gonna point to the before pseudo element. We don't need any content in it, so we're just going to give that an empty string, an open and close quotation mark, and then we're going to set the width: 200px. I'm sorry, the width is gonna be 300px. Again, you can see the width and height here in our HTML. It's 300 pixels by 200 pixels. And for this before pseudo element we're gonna set the width and height to that same value. Now we are gonna change that, but initially, just to get everything in the right place and to make sure everything looks right, we're gonna give it the same value. So then I'm gonna give it a background-color: black, and then I'm gonna set the display: block. Once we do that, you can see that it has replaced that image and actually nudged that image down. So one thing I want to do here is I want to give our image class, and remember this image class here is actually the div that's surrounding our image. Notice I've got a dot before it so I'm not pointing to the image element. Instead I'm pointing to the image class. So I'm gonna give that div a position of relative. And then we'll give this image swipe a position: absolute, and hopefully that will help fix our alignment issues. So now that before element is hovering right over the image itself. So for our background color, instead of just solid black, I'm gonna give it an rgba value. That a value in there is for alpha. It allows us to make this semi-transparent. So let's give it a value of (0,0,0, which will will give us black, and then after our next comma I'm gonna type .5). That will give us 50% transparency, and as you can see, it just darkens the image up a little bit. We might even bring that up a little bit to maybe 60%. So we've got that before pseudo element in place where we want it to be after we hover over it. But before we hover over it I want it to be collapsed. So what I'm gonna do is I'm going to set the transform origin just like we've done before, and I'm gonna set it to a value of 0 0. So the transform origin is going to be in the top left corner and then I'm going to transform it. So we're going to do a transform. I'm gonna do a scaleY. I'm gonna transform it vertically, I'm gonna squash it, and set it to 0. And as you can see, it seems to disappear. It's still there. It just has no height right now because we set the scaleY to 0. So let's set our transition property. We'll set it to .5s. Actually we need to do all and then .5s. And then we can create our hover effect. So we'll skip a couple lines, we'll point to image-swipe, and then we'll do a :hover::before. So when we hover over that image, we want the before pseudo element to animate out. And we're just gonna do another transform where we're gonna set scaleY back to a value of 1. Now when we hover over it, we can see that animate down. That's kind of a cool effect. So that's one of the three effects I want to talk about. The second effect, for our second image here, is when we hover over it I want to make that image grow. But I don't want the the boundaries of that image to grow. I want the image to grow inside those boundaries. So right now if we were to do a transform. Let's skip a couple lines here on img-scale on that particular class, and let's do a hover effect here, so :hover. When we hover over it, let's do a transform, and this time we're just gonna do a scale. We're not gonna do scaleX or scaleY, just scale. And let's set that to a value of 1.2. So it's going to scale up 120% whenever we hover over it. Well, right now when we do that, you'll see that it gets bigger, and that's kind of what we want, but we don't want the boundaries to grow with it. We want the boundaries to stay where they are. So in order to do that, we need to specify the width and height of our container. And since all of our containers are gonna be the same height, we can set it on the image class. We don't have to do it specifically for the image scale class. So let's go to our image class and set the width to 300px, and I'm just setting it to the same width and height as the image themselves. So we'll set the height to 200px. And then you'll notice if we hover over it, we're still seeing it expand outside the boundaries. So then all we need to do is add an overflow property to our image class and set it to hidden. Now again, it's okay that we're applying this to the generic img class because we don't really have anything outside the boundaries of our other two images anyway, so it doesn't matter. So now when we have or over it, you can see it's still not working quite right. And the reason for that is, let's scroll back down. It's because we added the hover to the image scale itself. So what we're scaling here is the image scale class, which is the div surrounding the image. So we're actually making the div itself larger as well as the image inside it. That's not what we want. We want the image itself to grow and we want the div to act as kind of a cropping effect for that image. So as the image inside the div grows, the div itself will crop the edges off. So instead of img.scale:hover, we're going to do img.scale:hover img. Notice the second one does not have a dot before because we're pointing to the actual image element. So now when we hover over that image, we can see the image getting larger as the div itself stays the same size. So now we just need to transform that into a transition. So we've got our transition here for img-swipe before. We need to create a transition now for the image itself inside the img-scale class. So let's create that rule, .img-scale img. In here we're just gonna set the transition property equal to all .5s. Semicolon to end that statement. Now when we hover over it, it's an actual animation. And if you want to make it a little more subtle, we can make it take longer, maybe one and a half seconds. We hover over it now and it's a much smoother animation. That looks really nice. So the very last animation I want to change here is gonna be this third one, and really what I wanna do here is I want to just kind of tint the image a different color as we hover over it. And it's gonna be very, very easy to do. What we're gonna do is let's skip a couple lines here and point to the .img-tint class. And here we're gonna give that class a background-color: green. Now obviously that's not going to change anything. The img-tint class is applied to the div around the image, and so the image is just going to appear on top of that green background, so we don't see it at all. But when we hover over that image, I want the image to just fade out just a little bit so that that green starts to show through. So for the img-tint class, let's actually skip a couple lines and create a transition on the image inside it. So .img-tint img. There we go. And then inside the curly brackets for that we're gonna set a transition property, and we're going to set it equal to, let's make this one 1.5 seconds as well, so all 1.5s. Then we'll skip a couple lines and point to the .img-tint:hover img so that when we hover over that div we want the image inside the div to fade out a little bit. So we'll just set it's opacity: .6. So let's try that. We have over the image and it fades out a little bit, revealing some of the green background behind it. And that's a really easy way to tint your images a certain color. So I hope that these three animations here give you some good ideas for different types of things you can do with your images as you're creating animations for your website. So thank you for watching, and I'll see you in the next lesson.

Back to the top