Instagram is widely known as the most popular photo network. It handles over 52 million photos per day and many of them include filters that alter images on the fly.
Read Also: How to Apply Instagram Filters on Web Images
By using this plugin, you gain much greater control over your images. This way you can choose which filters you want to apply to individual images and if certain filters should change based on user behavior such as hovering.
CSS supports animated transitions and Philter makes this process really simple. You just download Philter from the homepage or from the GitHub repo. Once it’s added to your web page, you just add the initialization code and let it go.
Here’s a sample snippet from the GitHub repo:
By default, you can set up transitions and extra data attributes that you can append in HTML. The
url parameter defines the path where Philter should look for custom SVG files used in the filtering process.
These extra filters are packaged with the library, so you don’t need to edit them at all. But, you might move them around or place them into a different directory structure from your current file, so this setting may need to be altered.
Now, you can just add custom filters right to your HTML
elements or their containers.
Here’s a simple example:
You can find a full list of all filters on GitHub, along with a complete setup guide and many other code samples.
Philter is one of the coolest free plugins around and it pushes the limits of modern CSS. You can even design your own filters if you’re willing to dig into the codebase and tinker around.
For a simple place to get started, just visit the Philter homepage and download a copy. You can have it up & running in no time.
Powered by WPeMatico