2.4 Captions With Filters and Transformations
Hello and welcome to the fourth lesson of this course, where you’ll learn how to use captions with filters and transformations to create an interesting hover effect. Let’s begin.
2.4 Captions With Filters and Transformations
Hello and welcome to the fourth lesson of this course, where you'll learn how to use captions with filters and transformations to create this. It's an even more complex hover effect than those we made previously. So, let's see how it's done. As usual, we start with the same code as the previous lesson. We have the same HTML, where each gallery item is made up of a figure that has an image and a fig caption. The CSS or the starting CSS is exactly the same. So, let's see about the hover specific styles. Let's start with the scale and the filter that's on by default on the images. So we'll say gallery img, we'll do a filter, invert, let's say 25%, and that's gonna dim out the images or desaturate them. And let's do a transform scale, let's make them a little bit bigger like 1.2. And let's not forget gallery was tight on figure. The overflow hidden, so we're gonna cut off the overflow on these images. And then, we'll add a transition, let's say all for simplicity, .3 seconds ease-in-out. All right, now let's work on the figcaptions. So, gallery figure figcaption. We'll start as usual, position absolute top left zero. We'll give it a width and a hight of 100%. Okay, and we need to display this text right here in the bottom left corner. So, we're gonna transform this in a grid container and I'm gonna set align content to end. To be positioned at the very bottom. Let's style the text by giving it a color of white. And we'll also use a text shadow to, just to make it or to give it a little bit of bare contrast with the image behind it. So we're gonna use 1 pixel, 1 pixel for the x and y values. 3 pixels for blur. And for the image itself, we're going to use black with an opacity of 50%. That's going to add a very subtle shadow to the text. Now, I also want to push the text to the right, a little bit. So let's do a padding-left of 2rems. This is made on the figcaption itself. And what else? Well, let's actually move it down vertically by 1rem. And we'll make it so that when we hover on the image, this will basically come in from the bottom, and it's just gonna change opacity and kind of slide up like this. So, we'll transform, we'll use translate 3D to benefit from hardware acceleration 1rem 0, so this is x, y, and z. And as you saw by doing that, we kind of pushed the text down by 1rem. And just before we hide this completely, let's go ahead and style the h1 and paragraph. So, gallery figure h1. I'm just going to reset it's margin and set a font size of 21 pixels. And then for the paragraph, we're gonna do a font size 13 pixels. And also let's push these up a little bit. I'm gonna say margin-bottom 2rems. And that's gonna push it up just a little bit. All right, now we can go back here, and we can set the opacity to 0 and that's going to hide them complete. And let's hit the transition. So what do we want to transition? Well, first of all, the transform, all right, the translate 3D here. So 0.3 seconds, and also the opacity, again, 0.3 seconds, ease-in-out. And then all that's left to do is go in here, gallery, figure on hover, we'll target the images. And we'll set filter to none, and then transform scale to 1. And that will basically, let's see, we have an error. We missed a semicolon on row 63, all right. Ops, there we go, okay. So now, when we hover an image, we remove the filter. And also, we reset its scale back to one. Now let's go ahead and show the text. We'll say gallery figure on hover figcaption, and we're doing the hover on the figure element because we just set its width and height to 100%, so we make sure that wherever I hover with my mouse, the hover event will be triggered. Here, we will say transform, translate3d. We'll just reset everything back to 0 and we'll set the opacity to 1. So now when we combine these two, we get this effect. We remove the filter, reset the transformation back on the image to 1 or to 100% and we're also transitioning the opacity of the text from 0 to 1. And also we're transitioning that transform property that we set here. So here we pushed it down by 1rem, and here, we're just pushing it back up to its original position, and the effect looks something like this. And again, it works no matter the size of the image. And let's not forget to set pointer events to none, so that we still get the hand cursor when we hover on an image. Now, for the final effect, the fifth one, we'll kind of take all of these and combine them into one single effect. And we'll do that in the next lesson.