Author: | bansal |
---|---|
Views Total: | 516 views |
Official Page: | Go to website |
Last Update: | September 7, 2020 |
License: | MIT |
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:
- blur
- grayscale
- brightness
- contrast
- invert
- saturate
- sepia
- backdrop-blur
- 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" />