5 Image transitions using just Filters!

#css #webdev #tutorial #codepen

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.

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.

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.

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.

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.

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.