2.1 CSS Filters
Hello and welcome to the first lesson of this course, where you’ll learn how to create a simple image hover effect with CSS filters.
2.1 CSS Filters
Hello and welcome to the first lesson where you'll learn how to create this image hover effect with CSS. It's a pretty simple one, it uses CSS filters. So let's go ahead and see how it's done. First of all, let me show you the setup that I have here. In terms of markup, I'm using a ul with a class of gallery. And then inside each list item, I have an image wrapped in an anchor tag. All of these images are from Unsplash and I'm linking directly to these. Obviously, in a real project, I don't recommend doing this, just host the images on your own server or on a third party server. But the idea is that using images directly from Unsplash like this is not exactly recommended. But, as I said, since this is a demo we'll just let it slide. Now some of these list items have a specific class, like tall or wide. And with the power of CSS, and more specifically CSS grid layout, I'm able to achieve very nice responsive gallery that looks something like this. Now the CSS for the gallery itself is not important for this course. All I'm doing is setting a display grid on the gallery, resetting the gallery style, setting a gap for the grid. Definding the template columns in such a way that they're basically responsive. And am setting the auto-flow to dense. So the grid items will rearrange themselves to provide the densest layout possible. Then the two classes that I mentioned, wide and tall, simply define a span of two columns for certain elements. Now on the images, because this is an image gallery, all I'm doing is setting the width and height 100%, display block and object to fit to cover. Now the object fits properly basically defines how the contents of an image in our case should be resized to fit the main container. In our case, we set object to fit to cover, which means the content is resized to maintain the aspect ratio, while filling the entire box of its parent. Now this is the base template that we're gonna use for all five effects. So, go ahead and save this somewhere. I've divided the CSS here, we have the layout specific styles, this where we'll start each time. And then on each specific hover effect we'll create new styles here. So it's really easy for you to follow along and start with the same building blocks. Now the source files for this course are up on CodePen. You'll find the link in the very first introduction lesson to the course, there's a collection there, and you'll find five pens with all five hover effects. So you can grab the code from there or follow along if that's what you want. Now let's go ahead and build this effect. As I was saying, we'll be using some CSS filters. Now if we do a search for CSS filter on Can I Use, you'll see that the filters are supported in only a handful of the most modern browsers. So they don't work in IE. They don't really work in edge, so they have a partial support here. They work well in the latest versions of Firefox, Chrome, Safari, Opera and so on. So, it's really up to you to decide what browsers you want to support. I thought I would just show this effect and what you can achieve with CSS filters just in case you want to use them. So, for the hover effect we're gonna target the gallery img, and inside I'm gonna start by setting a nice transition. Let's say all, or actually we don't need that. We can just say we want to transition the filter property. Let's say 0.3 seconds ease-in-out. And then we can start adding filters. So the way to add a filter with CSS is to use the property of filter and then the name of the filter, and there are a lot to choose from. If we open up the Mozilla Developer Network page, you'll see a full list of filters right here, where you can blur, brighten, contrast, gray scale, opacity, even saturate, sepia, and a few others. So we're gonna just test out a few, let's start with the grayscale for now. We can specify a percentage, so let's go with 100%. And that will instantly make all of our images gray scale. And then to create the hover effect, we can simply go gallery img:hover, and we'll simply remove the filter, all right? So by default, these are grayscale. And when I hover on them, they return back to their colored state, removing the filter. That's a super simple filter that we can use. The animations or the transitions here are a little bit choppy because I'm working on a relatively older Mac, so it's not the best performance in the world right here. But I think you can clearly see the effects. What else, we can maybe do a sepia. All right, so let's say filter, let's do a sepia 100%, add that kind of old vintage effect. What else we can do? Maybe we can do an invert. Let's say 25%. This will slightly dim or desaturate the images. It's almost like they're kind of transparent. And again, we have a nice effect. So that's a very simple effect by using filters. It works really well on the latest browsers, if you want to support older ones, I'm afraid you're out of luck because these filters are relatively new, so they don't have such a wide support just yet. Now, let's move on and create effect number two. That's gonna be made by using transforms or transformations to create a zoom in and zoom out effect. See you in the next lesson.