Awesome CSS Filter Effects For Blogger

This is a great CSS effect for your blogger images. If you are using some few image gallery, you can
apply this CSS filter.You ca check the effect from below demo link.you can follow this few step and add it to your blog.You can get other image
effect for here.

DEMO

1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

.gallery{
  list-style: none;
  margin: 50px auto; padding: 0;
  width: 642px;
  font-size: 0; /* fix inline-block spacing */
}
.gallery li{
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 200px; height: 150px;
    margin: 2px;
    border: 5px solid #fff;
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
    transition: all .3s ease;        
}
.gallery:hover li:not(:hover){       
    -webkit-filter: blur(2px) grayscale(1);
    opacity: .7; /* fallback */        
}

4. Go to blogger  Design > Page Element.

5. Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<ul class="gallery">
  <li><img src="Image link 1"></li>
  <li><img src="Image link 2"></li> 
  <li><img src="Image link 3"></li>    
  <li><img src="Image link 4"></li>    
  <li><img src="Image link 5"></li>    
  <li><img src="Image link 6"></li>         
</ul>

*Replace Image link With your image URL

7. Now save your HTML/Javascript'.

    You are done...