DEV Community

loading...

5 Image transitions using just Filters!

venkyakshaya profile image Akshaya Venkatesh ・2 min read

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.

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

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

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

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

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

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.

Discussion (1)

Collapse
ritvikdubey27 profile image
Ritvik Dubey

Very well explained🔥✌️

Forem Open with the Forem app