DEV Community

Akshaya Venkatesh
Akshaya Venkatesh

Posted on

5 Image transitions using just Filters!

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;
Enter fullscreen mode Exit fullscreen mode

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


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


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


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


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


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

There are several other filter functions that can enhance images. They can be found here. A complete working example can be found in the following Codepen.

Top comments (1)

ritvikdubey27 profile image
Ritvik Dubey

Very well explained🔥✌️