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.2 Images and Captions

Hello and welcome back to practical web animation. In this lesson I want to combine a couple of effects together so that we'll have a nice practical animation that we can apply to our websites. And we're going to be combining a couple of animations we're going to as we hover over these images we're going to see the images Zoom in a little bit, we're also gonna see them darken up as well. And then these captions that we see down here at the bottom, these aren't actually going to be at the bottom. We're going to style those and positioned them but we're also going to animate them on whenever we hover over to these images. So let's take a look at our html, as you can guess by looking at the markup here we are using bootstrap So if you jump into your settings and jump over to CSS you can see we're using bootstrap as well as a Google font called doses and you can go to financed or I'm sorry google.com/financed In order to see all of the different fonts you can use but those are the two external CSS files that we're including here and really we're just using bootstrap to layout our three columns a little easier. So this col-xs-4 for that gives us a column that takes up one third of the total width. Because remember bootstrap has a twelve column structure so if this particular column takes up four of those twelve columns. That's one third of the total width or one third of those columns so inside each of these columns we have a div with a class of img container and inside that container div we have a figure. And inside that figure we have an image and a caption. Now the image is just using lorempixel.com for placeholder images. Before we've talked about how you can randomize these, for example if we took off the /1 here and just had /technics. Then it would give you a random image and the issue we saw before is that if we gave them all this exact same URL all of the images would end up being the same so we could just type question mark and then any random set of characters here so that each one would have its own randomized image. However If we don't want it randomized, if we want to select a specific one, we can type a forward slash and then the ID of the one we wanna select. And you can just play around with these IDs, you can switch to two and see what the second image is. I'm just gonna switch back to one which is the image of this iPad. Once it refreshes, there we go. So each one of these has a specific image selected, so these are no longer randomly selected. But anyways again inside the figures we have images and captions and then in our CSS we have a few styles apply. So our Body has a background colour of dark gray with a little bit of padding on the tops of the images aren't right up against the top of the display area. And then just as we saw in our last video on image hover effects, we have our overflow for Image containers set to hidden. So that if we want to expand the image or zoom into the image inside that container we can do so and it will hide The excess parts of the image that are outside the boundaries. We also have a ten pixel border and a box of shadow which is what's giving at this little dark shadow around the edges. So then for our figure captions this is where we want to do a little bit more Styling right now. We've got our color set to white, our font family set to that Google font that we took a look at in our settings and then our text is upper cased. We've set the display to block and text align to center. So when I'm creating an animation like this, I like to create the animation in its. Ending state first. Why do I want this caption to end up? All I want to end up end up hovering over the image maybe a little North oo Center. So let's apply some more styles to this. The first thing I wanna do is I wanna set the positioning because right now the fit caption in the caption itself is below the image I wanna move it up and put it wherever I want to. So I'm going to set the positioning To actually, you know what, before we do that, I don't want to forget to fork our pen here. So again, you can look in your course notes to see the URL. for the current pen that we're starting with and then we'll just click on fork to create our own copy of it. Once we've got that copy, then we can come down to our FigCaption rule And add our position absolute. So for now I'm going to set the top position to about twenty pixels. So it should show up twenty pixels from the top of the containing element. If the containing element has a position of relative, and we see that it does not explicitly have that. If we were to set the left position of these, I'm curious what would happen, if we set the left to 0 We see that it actually moves outside the bounds of our image. And the reason it's not jumping all the way over to the left edges because these bootstrap columns by default have a position of relative. So it's actually positioning them relative to The bootstrap columns themselves not the image containers we've created. So I'm going to jump back up to the image container and we'll give it a position of relative And that moves our text back inside that image. So, or inside that container I should say. Let's get rid of the left here. We just need to set the top to twenty pixels. I'm also going to set the height to about forty pixels and then I also want to give these fig captions a background color. Now I want this to be semi transparent so we're going to use an RGBA value. We don't want to make the text semi-transparent so we don't want to use opacity because that would set the text and the background to transparent. We just want the background to be transparent. So we're going to use The background color property and instead of a hexadecimal value we're going to set it equal to an RGBA value so we can add some alpha to it. So I'm gonna set it to a value of 30 30 30 which will give us a dark. Gray and then after another comma, 0.5, which will make it 50% transparent and now we can see that transparency there. Now, since our height is set to 40%, we also need to set the line height to 40% So that our text will be centered. And I said 40%t I meant 40 pixels and then let's set the width of this fig caption element to 100% of its parent element. That way it will take up the full width and you'll see that since our text align here set to center that our text is now perfectly centered. Inside that container. Then just to make it a little more interesting, let's add a border bottom to it. Kind of a light gray border to the bottom of this container. So we're going to set border bottom to two pixels solid. And I'm gonna give it a value of #44 Not F F F. 444 that'll give us kind of a medium gray color. And that looks pretty good. Now when we hover over images this is going to be one of the things that animates we want this to animate down from the top so we're initially we're not going to see These captions at all. They're gonna be up past the top edge, it's going to be outside the boundaries of the container and then we hover over each image those captions are going to appear. So our final position is going to have a top value of 20 pixels as I mentioned I like to start him off and their ending Location. Now that we know where that ending location is, we can go ahead and move it off the edge. So we're gonna end up at a top value of 20 pixels. What started off at maybe negative 40 pixels so that it's completely off the edge since the height is 40 pixels. If we set the top to negative 40 pixels then that should move it all the way off. And again since the parent element, since that overflow is set to hidden we cannot see that fake caption anymore. So now let's create our hover effect for our image container. We'll skip a couple lines and we'll type .img-container:hover Space, and here we're going to be animating the fig caption. And all I'm going to do here is set the top position to 20 pixels. So now when we hover over each one we can see that it appears. Now we just need to make it animate, and again we're going to make it animate using the original fig caption rule. Here. So at the very end of that one just under border bottom let's go to the next line and we'll create our transition property. I'm gonna make it all, and let's make it take half a second. So point five S. So now when we have her over it, we can see that animation taking place. So that's one of the three animations we want to occur whenever we hover over these images. In the next lesson, we'll finish up with the last two animations. So let's save our work and in the next lesson we'll pick up where we left off. Thank you for watching.

Back to the top