{"id":25014,"date":"2019-11-07T21:11:05","date_gmt":"2019-11-07T13:11:05","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25014"},"modified":"2023-03-31T19:05:06","modified_gmt":"2023-03-31T11:05:06","slug":"instagram-filters-on-web-images","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/instagram-filters-on-web-images\/","title":{"rendered":"How to Apply Instagram Filters on Web Images"},"content":{"rendered":"

Many love using Instagram and the filters<\/a> that come with the app, to make their photos more interesting and beautiful. So far though, the use of these filters are restricted to use inside the app. What if you want to use Instagram filters on web images<\/strong>, outside of the app, like photos you want to put up in your personal blog or website?<\/p>\n

Well, you can use CSSGram<\/a>, a small library that allows you to edit your photos with filters that are similar to what you can find on the Instagram app<\/strong>. Unlike Photoshop where edits are manual or done via Photoshop actions, with CSSGram, the whole process is done via CSS.<\/p>\n

How It Works<\/h2>\n

To generate the effect, CSSGram utilizes CSS filters<\/strong> and CSS blend mode<\/strong>, basically blending the effects to the point where it mimics your desired Instagram filter. The effects are applied to the image container, via pseudo-elements. Let\u2019s check out how this is done with this \"1977\" example:<\/p>\n

Here\u2019s the pseudo-element added.<\/p>\n

\r\n\t._1977{\r\n\t\tposition: relative;\r\n\t}\r\n\t._1977:after{\r\n\t\tcontent: '';\r\n\t\tdisplay: block;\r\n\t\theight: 100%;\r\n\t\twidth: 100%;\r\n\t\ttop: 0;\r\n\t\tleft: 0;\r\n\t\tposition: absolute;\r\n\t}\r\n<\/pre>\n
And this is the CSS filter and Blend added:<\/p>\n
\r\n\t._1977 {\r\n\t\t-webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3);\r\n\t\tfilter: contrast(1.1) brightness(1.1) saturate(1.3); \r\n\t}\r\n\t._1977:after {\r\n\t\tbackground: rgba(243, 106, 188, 0.3);\r\n\t\tmix-blend-mode: screen; \r\n\t}\r\n<\/pre>\n
How to use<\/h2>\n
We can\u2019t add the filter class directly to the image element, it has to be added to the container or parent class, for example with <figure><\/code> as a container.<\/p>\n
The code will look like this:<\/p>\n
\r\n<figure class=\"_1977\">\r\n    <img src=\"images.jpg\">\r\n<\/figure>\r\n<\/pre>\n
Don\u2019t forget to include the CSSgram library (get it here<\/a>) to your HTML document.<\/p>\n
\r\n<link rel=\"stylesheet\" href=\"path\/to\/cssgram.css\"><\/pre>\n
I created the images demo before and after adding filter and the result is very nice. There are 13 filters included in the library at the moment. Below you can see the differences between the original image and the image under the filters \"1977<\/strong>\", \"Aden<\/strong>\" and \"Gingham<\/strong>\".<\/p>\n
See the Pen rOKPmW<\/a><\/p>\n