FREELessons: 6Length: 38 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.5 Captions With Filters, Transformations, and Opacity

Hello and welcome to the fifth and final lesson of this course. In this video, we’ll create an effect by combining bits and pieces from the other effects we’ve made. Let’s go ahead and see how it’s done.

Related Links

2.5 Captions With Filters, Transformations, and Opacity

Hello and welcome to the fifth and final lesson of this course, where you'll learn how to take all of the techniques you've used in this course to create this effect. As you can see, it incorporates bits and pieces from the other effects we've made, so let's go ahead and see how it's done. As usual we're starting from the same base project as we did in the previous two lessons. And let's begin with this gallery, list item figure. We'll set overflow to hidden because we'll use a scale effect on the images. So gallery img, we'll do a transform, Scale to 1.2. All right, so by default we're making this images a little bit bigger and then let's set a transition transform 0.3 seconds and the easing. Then let's target the figure caption, position absolute and that because we have like a border around it. And we're wanna position it in the middle while having some space around it we'll set the top and left to 5%. And we'll set the width and height to 90%. So in total it will equal a 100% of the parent element. Just like previous, we'll transform this into a grid container. So display: grid, align-content: center, to vertical align the content, and to horizontally align it we'll use a much simpler text-align:center, just like that. Now let's also set a border, 1 pixel solid white, let's set the color of the text to white. Let's also add a text shadow 1 pixel 1 pixel 1 pixel should do the trick nicely. RGBA, black, 30% opacity, and you know what we could do? Since we made the images bigger, let's also make the fig caption bigger. So we'll do a transform, also scale 1.2. Okay, so as you can see everything is now bigger, but we'll make it smaller once we hover. So let's transition, let's just say all 0.3 seconds ease-in-out. And what else? Do we forget something here? Maybe pointer-events set to none, okay, and that should do it. Now, let's move on to the h1 and the paragraph. Now as you saw in the preview, the h1 and the paragraph will animate individually. So we need to set some base styles for them, or some common styles. So we'll say .gallery figure h1, and .gallery figure paragraph, they both will have their opacities set to 0, and I'll set the transition to let's say 0.4 seconds this time. And actually let's calm up the opacity thing a little bit because we need to style these. So gallery figure h1, we need to style them and I need to see how they look like. Let's set their margin to 0, font-size, I think we'll stick to the same values that we used in the other examples. But of course, you can tailor these to your liking, font size I think it was 13 pixels. All right, now as I was saying these, the h1 and the paragraph animate individually. The h1 comes in from the top, the paragraph comes in from the bottom. So we need to add a specific transform to each one. Transform: translate3d(), so the h1 is gonna start at -1rem. So that's gonna push up, and then the paragraph will start at plus 1 rem, right? So when I reset their position they'll be at 0, 0, 0 and they'll both will be in their original positions. And now we can go ahead and apply the opacity to them. All right, now, let's write the code for the hover events. So gallery figure on hover, let's target the images first. Let's make the images grayscale, so grayscale 100%, and also let's scale them back to 100%. So transform scale 1, let's see how that looks like. Okay, and that should give us a nice base on which to layer that text. So the next we have gallery figure on hover figcaption or simply scale it back to it's original position. And now we can see the border being displayed there, and now let's go ahead and show the text. So we'll say gallery figure hover figcaption h1, maybe I'm being a bit too specific with the selectors, but I don't think it's gonna be that big of a problem for this demo. For these, we're gonna set their opacity to 1, and transform translate3d(0, 0, 0) to reset their position. And when we take all of these combined we get this. Again, pardon the performance issues and it works on any size image. So there are three things happening here on hover. First, we're applying a filter and a scale to 100% on the image. Next we're scaling the figcaption or the big border that you see here back to 100%. And third, we're displaying the text by changing the opacity to 100%, and we're resetting the position of the h1 and paragraph. And this is the final effect. And there you have it, those are five effects or hover effects you can very easily create with CSS. As I was saying in the previous lessons, it's really simple to create these by using transforms, filters, opacity, right? Just simple transitions can create a very, very cool looking hover effect like you saw in these five examples. So I encourage you to use these as a template, as a base for your own effects. Play around with the different colors, the different shapes. You can create with CSS nowadays to create unique hover effects and why not share them with us? That's about it for this short course, thank you very much for watching, I'm Adi Purdila, and until next time take care.

Back to the top