5 Image transitions using just Filters!
Tags: css, webdev, tutorial, codepen
Published: 2021-05-12 07:42:52

In this blog, I will be demonstrating 5 different filter functions that you can use with image transitions to make your site super cool. Let's dive right in!

The filter property is used to create graphic effects like color variations, inversions, etc on elements. They're primarily used to enhance backgrounds, images, and borders. Here is the general syntax. 

```filter: <filter-function> [<filter-function>]* | none ```

For all images, we simply apply a filter style as follows to create the magic.
```
img {
    filter: opacity(0.5); // change the function here.
    transition: filter 0.5s ease-in;
} 

img:hover {
    filter: none;
}
```

Let's look at 5 simple yet really cool functions that can make image transitions interesting.

### 1. OPACITY

``` filter: opacity(50%) | opacity (1) ```

The opacity function controls the transparency of the element. Values range from 0% (making the element completely transparent) to 100% (leaves the image unaltered). Its only advantage over the "opacity" property is that it offers better performance through hardware acceleration on some browsers.

![Opacity fade in and out gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wplxgprsmqkovoz6dj7d.gif)

### 2. SEPIA

``` filter: sepia(80%) | sepia(1) ```

The sepia function applies a sepia (reddish-brown) tone to the image. Fun fact, sepia toning was originally done to protect images from fading and pollutants.
A sepia tone of 0% leaves the image unaltered and 100% turns the image to completely sepia.

![Sepia fade in fade out](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f87odte79905fd6hvnkm.gif)

### 3. BLUR

``` filter: blur(2px) | blur(<length>)```

The blur function applies a blur effect to the image. It takes an input length which is basically the number of screen pixels that blend into each other. The higher the length, the greater the blur. A value of 0px leaves the image unaltered.

![An image blurring and getting clear](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6vesmxwv7usylunbqn7.gif)

### 4. GRAYSCALE

 ``` filter: grayscale(0%) | grayscale(100%)```

The grayscale function takes in a % value and applies a black and white effect to the image with 0% leaving the image unaltered and 100% creating a complete grayscale.

![Grayscale fade in fade out gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2c07pbmz5kdxctr338g7.gif)


### 5. BRIGHTNESS

```filter: brightness(60%) | brightness(200%)```

The brightness function controls the brightness of the image with a value of 100% leaving the image unaltered. Values below 100 reduce the brightness and those above 100 raise the brightness.

![Brightness fade in fade out gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5frv7ufrxduszl4i7nv9.gif)


There are several other filter functions that can enhance images. They can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/filter). A complete working example can be found in the following Codepen. 

{% codepen https://codepen.io/akshaya-venkatesh8/pen/OJpVreO default-tab=css,result %}