Add Visual Effects To Images Using CSS Filters – filters.css

Preview:

Description:

A tiny PURE CSS library that applies configurable visual effects (like blur or color shifting) to images on page load or on hover using CSS filters.

Supported Filters:

1. blur
2. grayscale
3. brightness
4. contrast
5. invert
6. saturate
7. sepia
8. backdrop-blur
9. opacity

How to use it:

1. Install & download.

# NPM
$ npm i filters.css –save

2. Load the filters.css in the document.

<link href="dist/filters.min.css" rel="stylesheet" />

3. Apply a blur effect to the target image.

// blur 0 ~ blur 10
<img src="example.jpg" class="blur-0" />
...
<img src="example.jpg" class="blur-10" />
// Or apply the effect to the image on hover
<img src="example.jpg" class="hover-blur-0" />
...
<img src="example.jpg" class="hover-blur-10" />

4. Converts the image to grayscale.

// grayscale 0 ~ grayscale 10
<img src="example.jpg" class="grayscale-0" />
...
<img src="example.jpg" class="grayscale-10" />
// Or apply the effect to the image on hover
<img src="example.jpg" class="hover-grayscale-0" />
...
<img src="example.jpg" class="hover-grayscale-10" />

5. Make the image appear brighter or darker.

// brightness 0 ~ brightness 10
<img src="example.jpg" class="brightness-0" />
...
<img src="example.jpg" class="brightness-10" />
// Or apply the effect to the image on hover
<img src="example.jpg" class="hover-brightness-0" />
...
<img src="example.jpg" class="hover-brightness-10" />

6. Adjusts the contrast of the image.

// contrast 0 ~ contrast 10
<img src="example.jpg" class="contrast-0" />
...
<img src="example.jpg" class="contrast-10" />
// Or apply the effect to the image on hover
<img src="example.jpg" class="hover-contrast-0" />
...
<img src="example.jpg" class="hover-contrast-10" />

7. Inverts the color samples in the image.

// invert 0 ~ invert 10
<img src="example.jpg" class="invert-0" />
...
<img src="example.jpg" class="invert-10" />
// Or apply the effect to the image on hover
<img src="example.jpg" class="hover-invert-0" />
...
<img src="example.jpg" class="hover-invert-10" />

8. Adjust the saturation of the image.

// saturate 0 ~ saturate 10
<img src="example.jpg" class="saturate-0" />
...
<img src="example.jpg" class="saturate-10" />
// Or apply the effect to the image on hover
<img src="example.jpg" class="hover-saturate-0" />
...
<img src="example.jpg" class="hover-saturate-10" />

9. Convers the image to sepia.

// sepia 0 ~ sepia 10
<img src="example.jpg" class="sepia-0" />
...
<img src="example.jpg" class="sepia-10" />
// Or apply the effect to the image on hover
<img src="example.jpg" class="hover-sepia-0" />
...
<img src="example.jpg" class="hover-sepia-10" />

10. Apply a blur effect to the background/backdrop of your image.

<img src="example.jpg" class="backdrop-blur-5"> 
<div class="backdrop-blur-5">.backdrop-blur-5</div>

11. Set the opacity level for the image.

// opacity 0 ~ opacity 10
<img src="example.jpg" class="opacity-0" />
...
<img src="example.jpg" class="opacity-10" />
// Or apply the effect to the image on hover
<img src="example.jpg" class="hover-opacity-0" />
...
<img src="example.jpg" class="hover-opacity-10" />