Plugin For CSS Filters In jQuery – Philter.js

Html & CSS
File Size:
Views Total: 940 views
Last Update:June 09, 2022
Publish Date: October 31, 2015
Official Website: Go to website
License: MIT
Plugin Author: Specro
Demo    Download

As we all know that philter is almost an easy way for all the main processes or the post-processes for their major content in the web. By using the Philter tool it is an easy way of writing for an attribute in the slide of HTML. It also supports the hover effects. As this is the nice effect and good effect for the grayscale transition as this one is created by the philter with the one of the simple attribute along it has the drop shadow.

CSS filters supported:

  • hue-rotate
  • saturate
  • sepia
  • grayscale
  • contrast
  • invert
  • opacity
  • brightness
  • drop-shadow
  • svg
  • color
  • blur

How to use :

1. Add the jQuery library and the jQuery Philter plugin :

<script src="jquery-2.1.4.min.js"></script>
<script src="js/philter.min.js"></script>

2. Initialize the plugin script :

$.philter();

3. Add a CSS filter with a value on your element :

<div class="philter blur_5"></div>

4. Also support with applying on multiple CSS filters :

<div class="philter blur_5_hover_0 grayscale_100"></div>

5. Applied with custom SVG filter to the element :

<div class="philter svg_filter"></div>

List Of Version :
  • v1.5.0
  • v1.4.1
  • v1.4.0
  • v1.3.1
  • v1.3.0
  • v1.2.0
  • v1.1.2
  • v1.1.1

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.