How to Apply Instagram Filters on Web Images
Many love using Instagram and the filters 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, outside of the app, like photos you want to put up in your personal blog or website?
Well, you can use CSSGram, a small library that allows you to edit your photos with filters that are similar to what you can find on the Instagram app. Unlike Photoshop where edits are manual or done via Photoshop actions, with CSSGram, the whole process is done via CSS.
How It Works
To generate the effect, CSSGram utilizes CSS filters and CSS blend mode, 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’s check out how this is done with this "1977" example:
Here’s the pseudo-element added.
._1977{
position: relative;
}
._1977:after{
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
And this is the CSS filter and Blend added:
._1977 {
-webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3);
filter: contrast(1.1) brightness(1.1) saturate(1.3);
}
._1977:after {
background: rgba(243, 106, 188, 0.3);
mix-blend-mode: screen;
}
How to use
We can’t add the filter class directly to the image element, it has to be added to the container or parent class, for example with <figure> as a container.
The code will look like this:
<figure class="_1977">
<img src="images.jpg">
</figure>
Don’t forget to include the CSSgram library (get it here) to your HTML document.
<link rel="stylesheet" href="path/to/cssgram.css">
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", "Aden" and "Gingham".
See the Pen rOKPmW
If you’re just interested in using any one of the styles, you can load the individual CSS files accordingly.
Using SCSS
If you want to add the filters to your current image container class without a name change, you can do so by extending the filter effect inside your SCSS files. Here’s how to do it.
Firstly download the SCSS source file and import your SCSS file.
@import 'vendor/cssgram';
Suppose you have the HTML sctructure like below:
<div class="my-class">
<img src="images.jpg">
</div>
Then in your style.scss, extend the filter like this:
.my-class {
...
@extend %_1977;
}