How to blur the background of each image item in light gallery? (Specific)

Question

I use Light Gallery ( http://sachinchoolur.github.io/lightGallery ) for my website and want to make some customization on it. I want to blur the background image of each and every image items that open in the gallery by using those images in their background-image (in CSS). Well, Light gallery use much more Java Script references from html tag attributes to view values in the gallery which it's a little complicated for one like who doesn't predominate on JS. The structure of gallery items looks like this:

 <ul id="lightgallery"> <li> <a href=""> <img src=""> </a> </li> </ul> 

If I blur background-image of (li) tag in CSS, it effects the thumbnails (not gallery thumbnail). I found the main gallery container class (.lg-backdrop) which can blur the background of my light gallery, but it's a “class” and the effects applies to all items which is defined by this class. and its my CSS:

 .lg-backdrop:before { content: ""; position: fixed; left: 0; right: 0; z-index: -1; display: block; background-image: url(contents/images/canada/canada_exh_1.jpg); width:100%; height:100%; -webkit-filter: blur(50px); -moz-filter: blur(50px); -o-filter: blur(50px); -ms-filter: blur(50px); filter: blur(50px); } 

Here is I am asking if there is a way to blur the background of each image item by their own image?

Answer 1

The CSS filter property provides access to effects like blur or color shifting on an element's rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.

The Syntax is :

    .filter-me {
  filter: <filter-function> [<filter-function>]* | none
}