{"id":33930,"date":"2017-07-03T21:01:00","date_gmt":"2017-07-03T13:01:00","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=33930"},"modified":"2023-04-06T19:15:14","modified_gmt":"2023-04-06T11:15:14","slug":"image-alteration-css-filters-philter-js","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/image-alteration-css-filters-philter-js\/","title":{"rendered":"Transform Images With Philter.js: Free CSS Filter Library"},"content":{"rendered":"<p><strong>Instagram<\/strong> is widely known as the most popular photo network. It handles over <a href=\"https:\/\/www.statisticbrain.com\/instagram-company-statistics\/\" target=\"_blank\" rel=\"noopener nofollow\">52 million photos<\/a> per day and many of them <strong>include filters<\/strong> that alter images on the fly.<\/p>\n<p>This is also possible using <a href=\"https:\/\/www.hongkiat.com\/blog\/css-filter\/\">CSS filters<\/a> which <strong>apply directly in the browser<\/strong>. These custom filter properties have <a href=\"https:\/\/caniuse.com\/css-filters\" target=\"_blank\" rel=\"noopener\">wide support<\/a> across many browsers and they look great.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/instagram-filters-on-web-images\/\">How to Apply Instagram Filters on Web Images<\/a><\/p>\n<p>With the <strong><a href=\"https:\/\/specro.github.io\/Philter\/\" target=\"_blank\" rel=\"noopener\">Philter<\/a> JavaScript plugin<\/strong>, you can scale this process to save time and move your code into HTML for <strong>dynamic filter effects<\/strong>.<\/p>\n<p>By using this plugin, you gain <strong>much greater control over your images<\/strong>. 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.<\/p>\n<p>CSS <strong>supports animated transitions<\/strong> and Philter makes this process really simple. You just download Philter from the <a href=\"https:\/\/specro.github.io\/Philter\/\" target=\"_blank\" rel=\"noopener\">homepage<\/a> or from the <a href=\"https:\/\/github.com\/Specro\/Philter\" target=\"_blank\" rel=\"noopener\">GitHub repo<\/a>. Once it\u2019s added to your web page, you just <strong>add the initialization code<\/strong> and let it go.<\/p>\n<p>Here\u2019s a <strong>sample snippet<\/strong> from the GitHub repo:<\/p>\n<pre>\r\n&lt;script&gt;\r\n  new Philter({\r\n    transitionTime: 0.5, \/\/ hover transition time\r\n    url: '.\/js', \/\/ philter directory\r\n    tag: true \/\/ 'philter' in data attributes\r\n  });\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>By default, you can <strong>set up transitions and extra data attributes<\/strong> that you can append in HTML. The <code>url<\/code> parameter defines the path where Philter should look for custom SVG files used in the filtering process.<\/p>\n<p>These extra filters are <strong>packaged with the library<\/strong>, so you don\u2019t 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 <strong>may need to be altered<\/strong>.<\/p>\n<p>Now, you can just <strong>add custom filters<\/strong> right to your HTML <code>&lt;img&gt;<\/code> elements or their containers.<\/p>\n<p>Here\u2019s a <strong>simple example<\/strong>:<\/p>\n<pre>\r\n&lt;div data-philter-blur=\"5 0\"&gt;&lt;\/div&gt;\r\n<\/pre>\n<p>You can find a <strong>full list of all filters<\/strong> on <a href=\"https:\/\/github.com\/Specro\/Philter\" target=\"_blank\" rel=\"noopener\">GitHub<\/a>, along with a <strong>complete setup guide<\/strong> and many other code samples.<\/p>\n<p>Philter is one of the coolest free plugins around and it pushes the limits of modern CSS. You can even <strong>design your own filters<\/strong> if you\u2019re willing to dig into the codebase and tinker around.<\/p>\n<p>For a simple place to get started, just visit the <a href=\"https:\/\/specro.github.io\/Philter\/\" target=\"_blank\" rel=\"noopener\">Philter homepage<\/a> and download a copy. You can have it up & running in no time.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/\" rel=\"noopener\">Free CSS Code Generator For Instagram-Style Filters<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>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. This is also possible using CSS filters which apply directly in the browser. These custom filter properties have wide support across many browsers and they&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[507,3497],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Transform Images With Philter.js: Free CSS Filter Library - Hongkiat<\/title>\n<meta name=\"description\" content=\"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\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/image-alteration-css-filters-philter-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Transform Images With Philter.js: Free CSS Filter Library\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/image-alteration-css-filters-philter-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-03T13:01:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T11:15:14+00:00\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-alteration-css-filters-philter-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-alteration-css-filters-philter-js\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Transform Images With Philter.js: Free CSS Filter Library\",\"datePublished\":\"2017-07-03T13:01:00+00:00\",\"dateModified\":\"2023-04-06T11:15:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-alteration-css-filters-philter-js\\\/\"},\"wordCount\":374,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\",\"Javascript Library\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-alteration-css-filters-philter-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-alteration-css-filters-philter-js\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-alteration-css-filters-philter-js\\\/\",\"name\":\"Transform Images With Philter.js: Free CSS Filter Library - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2017-07-03T13:01:00+00:00\",\"dateModified\":\"2023-04-06T11:15:14+00:00\",\"description\":\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-alteration-css-filters-philter-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-alteration-css-filters-philter-js\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-alteration-css-filters-philter-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Transform Images With Philter.js: Free CSS Filter Library\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Transform Images With Philter.js: Free CSS Filter Library - Hongkiat","description":"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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/image-alteration-css-filters-philter-js\/","og_locale":"en_US","og_type":"article","og_title":"Transform Images With Philter.js: Free CSS Filter Library","og_description":"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","og_url":"https:\/\/www.hongkiat.com\/blog\/image-alteration-css-filters-philter-js\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-07-03T13:01:00+00:00","article_modified_time":"2023-04-06T11:15:14+00:00","author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/image-alteration-css-filters-philter-js\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-alteration-css-filters-philter-js\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Transform Images With Philter.js: Free CSS Filter Library","datePublished":"2017-07-03T13:01:00+00:00","dateModified":"2023-04-06T11:15:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-alteration-css-filters-philter-js\/"},"wordCount":374,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS","Javascript Library"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/image-alteration-css-filters-philter-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/image-alteration-css-filters-philter-js\/","url":"https:\/\/www.hongkiat.com\/blog\/image-alteration-css-filters-philter-js\/","name":"Transform Images With Philter.js: Free CSS Filter Library - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2017-07-03T13:01:00+00:00","dateModified":"2023-04-06T11:15:14+00:00","description":"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","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-alteration-css-filters-philter-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/image-alteration-css-filters-philter-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/image-alteration-css-filters-philter-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Transform Images With Philter.js: Free CSS Filter Library"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-8Pg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/33930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=33930"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/33930\/revisions"}],"predecessor-version":[{"id":65876,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/33930\/revisions\/65876"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=33930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=33930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=33930"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=33930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}