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

Category: CSS & CSS3 , Image , Recommended | September 7, 2020
Author:bansal
Views Total:122 views
Official Page:Go to website
Last Update:September 7, 2020
License:MIT

Preview:

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

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.

filters.css Blur

// 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.

filters.css Greyscale

// 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.

filters.css Brightness

// 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.

filters.css Contrast

// 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.

filters.css Invert

// 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.

filters.css Saturate

// 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.

filters.css 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.

filters.css Backdrop Blur

<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.

filters.css Opacity

// 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" />

You Might Be Interested In:


Leave a Reply