Blogger Ever

Instagram filters on images using CSS

CSSgram, a small CSS library to turn the images into filtered using CSS filter and blend.

I always loved those retro and classy filters of Instagram, later after the release of Retrica and Candy like camera apps make a trend of having filtered images. Right now they are much more popular on social media due to flat and light gesture on image and image looks much more pretty. This is a fine tutorial to apply filters on <img> tag.

Step 1: Install Library

The library has its own CDN, which I prefer to use. Just add the following line after <head> tag and you are ready to use it.
<link rel="stylesheet" href="">
Otherwise you can host it by yourself or work offline by downloading it.

Step 2: Setup markup

The plugin works when img tag is under figure tag and figure tag holds the class of that specific filter to be applied.

<figure class="_1977">
<img src=''/>
Now the markup is done, let us add classes.

Step 3: Add Class

The following is class list for filters.
  • 1977: class="_1977"
  • Aden: class="aden"
  • Brooklyn: class="brooklyn"
  • Clarendon: class="clarendon"
  • Earlybird: class="earlybird"
  • Gingham: class="gingham"
  • Hudson: class="hudson"
  • Inkwell: class="inkwell"
  • Lark: class="lark"
  • Lo-Fi: class="lofi"
  • Mayfair: class="mayfair"
  • Moon: class="moon"
  • Nashville: class="nashville"
  • Perpetua: class="perpetua"
  • Reyes: class="reyes"
  • Rise: class="rise"
  • Slumber: class="slumber"
  • Toaster: class="toaster"
  • Walden: class="walden"
  • Willow: class="willow"
  • X-pro II: class="xpro2"
In step 2, I added 1977 and the first picture shows the effect of it.

Optional Step: Dynamically add classes using Javascript

Not necessarily that you can add class or enclose each image by code, you can use the code below to enclose every image in figure tag as well as add a class on it.
(function() {
  var e = document.querySelectorAll('img');
  for (var i = 0; i < e.length; i++) {
    var wrapper = document.createElement('figure'),
      myDiv = e[i];
    wrapper.setAttribute('class', '_1977');
    myDiv.parentNode.replaceChild(wrapper, myDiv);
Putting the above Javascript before closing of body tag under script tag, then it will turn your all images into filtered one. Or you can simply change the var e and select the images you want with simple query selector. Any thing to say, throw a comment.

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.