Adding Instagram filters on images in my website

Question

I am using CSSGram on my website to make images have Instagram-like filters. This is the method below to add a filter to a image:

Answer 1

You can use jquery like

$('img').addClass('aden');

to add the css to all imgs

Answer 2

Yes apply to the container and style with css, example below:-

-webkit-filter: brightness(0.9) contrast(1.4) hue-rotate(150deg) invert(0.1);

Answer 3

The styles are based on a img sitting inside figure element. You could automatically wrap all of the images in a figure element like so

$(function() {
    $("img").wrap("<figure class='aden'></figure>");
});

However, you might want to be more specific with that selector as it could break other images like logos, social icons etc

Working example here:

https://jsfiddle.net/cs9asjhs/

Answer 4

with JQUERY:

use addClass method

$('figure').addClass('aden')

see this fiddle

or you can use just javascript:

var a = document.querySelector('figure');
if (a.classList) {
    a.classList.add('aden');
} else {
    a.className += ' aden';
}

see this fiddle