2.3 Captions With Opacity and Scale
The first two hover effects you learned were pretty simple; we only played with the image itself. In this lesson, we’ll make things more complex by adding captions. Let’s begin.
2.3 Captions With Opacity and Scale
Hello and welcome to the third lesson of this course. The first two hover effects that you created were pretty simple, they were only effecting the image itself. Well, in this lesson, we'll make these a bit more complex by adding captions. And the final result would look something like this. Now, let's go ahead and make that happen. For the next three effects, I went ahead and changed the markup. So instead of just displaying an image inside a list item, now we're using a figure element which is optional, of course you can use a div here if you want. So we have our figure and inside, it's the image wrapped inside an anchor tag. Just like we did before, the only thing we added is a figcaption which contains an h1 and a paragraph, title and a description. In my case, I just used the names of the unsplash images, and of course, the names of the photographer. And I went ahead and changed the markup for all of them. In terms of CSS, the only thing that I changed was to style this figure to have a 0 margin, 100% width and height and a position of a relative. The rest is exactly the same and the result is roughly exactly the same as before but now we have these elements, these captions just kind of hanging out. So we need to take care of those. Now, let's move on to the actual styling. We'll begin with the figcaption. So we'll say, gallery, figure, figcaption. We'll start by positioning it absolutely, and we'll set its top and left to 0. So now the text is above the image and is displayed on the top left corner on all of them. Then, let's set a background of white and then let's give these a width and a height. So I want these to be as wide and as tall as their parent element minus two rems, because I'm gonna add a margin of one rem to all of these. So to calculate that, we're gonna use the calc function in CSS. And we're gonna say, 100%- 2rem. Same goes for the height, calc(100%- 2rem). So now you can see that they are the same width and height as my image, minus the value of 2rem. And now when I add a margin of 1rem, they are positioned exactly in the middle. And I specifically made the gallery like this responsive and by using CSS grid because I wanted you to see that these effects work in any sized image. You don't need like special CSS for different kinds of images, it just works on every size image you want. And it works in the same gallery even if your images are not the same size. So, let's move on. Now let's align the text to the center. Oops, text-align center. And then to position the title and paragraph in the middle, all we can do is transform our figcaption in a grid container. So I'm gonna set display to grid, and I'm gonna say align-content to center. And that's gonna take the content, all of it, and align it in the center of my figcaption here. No matter the size, this is one of the awesome things about CSS grid layout. It's really easy to do these sorts of alignments. Now what else? Well, let's think about how the final product looks like, right? So by default, this is all hidden. It's scaled down just a little bit, and then when I hover, I bring up the opacity and I do a little scale transformation. So, actually before that, let's go ahead and style these text elements. So gallery figure h1, let's reset the margin here and let's use a font size of 21 pixels, and also let's give it a color, rgba, let's say black 75% opacity. And then we'll style gallery figure paragraph. Let's do a 13 pixel font size, itallic, and what else, let's add a color to this as well. Let's say of 0.4, 0.5% opacity somewhere in that neighborhood. All right, now we'll come back to our figcaption. And let's go ahead and hide our figcaption completely so we'll set opacity to 0, and let's do a transform scale 0.95. So we're only decreasing the size by 5%. And let's add a transition. So we could do all, but we can be specific as well. We can set opacity, like maybe 0.3 seconds. And we can also transition the transform property. Again, 0.3 seconds, or you can choose a different value if that's what you want, okay? Nothing happens right now, but then on figure:hover we can target the figcaption and we can set the opacity to 1 and transform scale to 1. All right, so now, when I hover, I get a nice transition. So we're changing both the opacity and the scale of the element. And in fact, let's set 0.9 opacity, so 90% opacity. So we have a little bit of a see through to the image behind it. Now the only problem is that when I hover on an image, I lose that hand cursor that signifies a link. So to fix that, all we have to do is set pointer-events to none on the actual figcaption. So now, even if we're showing the figcaption, we'll still maintain that cursor. And as you see, it works on any size image. That was pretty easy, right? And because we're dealing with CSS, you can style the figcaption in our case any way that you want. You can use a dark color, you can use rounded borders, you can use shadows. So it's really up to your imagination how you want to style this. In terms of code, there's not much to it with the power of CSS and CSS grid, specifically, we can make this happen in very few lines of code. And it's actually cross-browser, so it's gonna work in a lot of browsers, even some of the older ones. Now, let's move onto effect number four, which also uses captions. But we'll also use filters and transformations, so we'll do that in the next lesson.