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.3 Animating the Images

Hello and welcome back to Practical Web Animation. In our last lesson we created these hover effects so that when we hover over our images, the captions for those images animate onto that particular div. Now I want to add a little more to this animation so that when we do hover over that image, we also see the image itself animate. We're gonna see it is zoom in a little bit like we've done before, and we're also gonna see it darken up. So, let's get started. We really just have a couple of simple CSS rules we need to apply and then we'll be good to go. So we've created our image container up here, our image container rule I should say. This is the class for the div that contains these images and in the captions for the images, and with this image container we set our overflow to hidden. So that means when we increase the size of these images, anything extra that goes outside the boundaries of this div is just gonna be hidden, we won't be able to see it. So that's exactly what we want. So let's scroll down to the very bottom, skip a couple lines. And then let's create a new rule for img-container:hover. Now we've already created this rule for the figcaption element. We created the, image-container:hover figcaption, so that we get animate those captions separately. Now we wanna animate the image itself, which is inside this container. So we have, image-container:hover img. So for this image what I wanna do when we hover over it is I wanna scale it up a little bit. So we're gonna use the transform property to do that. We'll use transform: scale. And then inside parentheses we're gonna set that scale to 1.4. That will bring it up 140% of its original width and height. So let's hover over that and see how it looks. And that looks pretty good. Now, if you're playing around with effects like these and you zoom in and the image looks a little too grainy or pixellated, then you might have to get a larger version of the image and just shrink it down initially. Make it smaller in the initial image, and then when you have are over it, you're basically just zooming in to 100%. For these images, these are aren't really images that we have much control over. We can change the size of the images using these values here, but I'm gonna stick with what we have for now. So, right now we don't really have an animation, we just have these images suddenly jumping up to one 140%. And obviously we want that to animate slowly, that's the whole point of this course. So let's do that. We're going to find the rule. I don't know if we've created it yet for the image itself, and we have not. So, let's do this right after the img-container rule. We'll create another rule for img-container img. So this is for the image elements inside the image-container class. I'm going to set transition to all. And we're gonna make this last one 1s. So now we hover over those and we see it actually animate in. And that already looks a lot nicer. Now as I mentioned before, I also want these images to darken up whenever we hover over them. And we can do that one of two ways. And when you're doing something like this, you just wanna ask yourself, what's the easiest way to accomplish what it is I'm trying to accomplish? So, the two different ways we could do this is we could just give it a dark background color and then bring the opacity of the image down a little bit. Or we can use the before pseudo class to create another element that hovers over it and darkens up whenever we hover over it. Now the easiest way I think would be to darken up the background image and then just reduce the opacity of the image itself. So for our image-container class I'm going to give it a background color, which we're not even gonna see initially, of black. So, #000. And this is very similar to what we did in the last lesson when we tinted our images a different color, I think we used green in the last lesson. So we gave it a green background. And then when we hover over the image we made that opacity go down a little bit so that the green kind of shone through the image. And that's kind of what we're doing here, but we're just using black. Because all we wanna do is make the image a little darker when we hover over it. So now that the background color is black we can jump into the image itself. And just for kicks, let's change the opacity to see what happens. We'll set the opacity to .5. And we'll see that it darkens up quite a bit. And I might even want to go darker than that, so let's bring it down to maybe .3. And that might be too much. You can play around with those numbers till you find something you like, but let's stick with .4. So we don't really want that here, we want it on the hover. So let's get rid of that. I'm gonna cut it, and then we'll jump back down to the hover effect for that image and paste it. So now when we hover over our images, there we go. We're seeing not only the image zooming in and the caption coming in above, but we're also seeing the image darken up quite a bit, and that's a really nice effect. So as you can imagine, if you have a whole grid full of these images, you're gonna have this nice effect on every single one of them, and it's gonna look really nice. So, that's just another type of image effect that you can use combining some of the things that we've talked about in the last few lessons. So thank you for watching and I'll see you in the next video.

Back to the top