jQuery and CSS3 Based Gallery Filter with Blur Effects

A jQuery plugin allows you to filter a gallery of images by blurring the unnecessary images using CSS3 transitions and blur filter.

How to use it:

1. Create a control bar to filter the gallery.

<ul id="filter">
  <li>Filter By:</li>
  <li class="current"><a href="#">All</a></li>
  <li><a href="#">Category 1</a></li>
  <li><a href="#">Category 2</a></li>
  <li><a href="#">Category 3</a></li>
  ...
</ul>

2. Insert a set of image into your web page and categorize them with CSS classes.

<div class="thumbnails">

<a href="#" class="tumb Category-1">
    <span>Image Title 1</span>
    <img data-src="1.jpg" src="placeholder.png" alt="">
</a>

<a href="#" class="tumb Category-2">
    <span>Image Title 1</span>
    <img data-src="2.jpg" src="placeholder.png" alt="">
</a>

<a href="#" class="tumb Category-3">
    <span>Image Title 1</span>
    <img data-src="3.jpg" src="placeholder.png" alt="">
</a>

</div>

3. The CSS for the gallery.

.thumbnails {
  display: block;
  width: 90%;
  margin: 20px auto;
}

.tumb {
  position: relative;
  display: inline-block;
  width: 32.6%;
  height: 150px;
  overflow: hidden;
  background: url(loader.gif) no-repeat center center rgba(255, 255, 255, 0);
  padding: 0;
  margin: 0.1em;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.tumb img {
  display: block;
  width: 100%;
}

.tumb span {
  display: none;
  visibility: hidden;
}

.info span {
  position: absolute;
  top: 0%;
  left: 0%;
  display: block;
  visibility: visible;
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

.info:not(.blurme) span {
  display: block;
  text-align: center;
  margin: 0 auto;
  padding: 5px 10px;
  background: #000;
  background: rgba(0, 0, 0, 0.24);
  color: #FFF;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

4. The CSS/CSS3 rules for the gallery filter. Here you can add more filters.

.blurme {
  -webkit-filter: blur(10px) opacity(0.2);
  filter: blur(10px) opacity(0.2);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

5. Make the gallery responsive using CSS3 media queries.

@media(min-width:320px) {

.tumb {
  width: 100%;
  height: auto;
}
}
@media(min-width:480px) {

.tumb {
  width: 100%;
  height: auto;
}
}
@media(min-width:768px) {

.tumb {
  width: 49.3%;
  height: 200px;
}
}
@media(min-width:1024px) {

.tumb {
  width: 32.7%;
  height: 150px;
}
}

6. Include the necessary jQuery library at the bottom of the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

7. The Javascript to enable the gallery filter.

var filter_link = $('ul#filter a'),
    filter_current = $('ul#filter .current'),
    gallery_item = $('.tumb'),
    gallery_img = $('.tumb > img');


filter_link.click(function(){
    filter_current.siblings().removeClass('current');
    filter_current.removeClass('current');
    $(this).parent().addClass('current');
  var filterVal = $(this).text().toLowerCase();
  if(filterVal == 'all') {
    gallery_item.each(function() {
      $(this).removeClass('blurme')
      .parent().addClass('info');
    });
  }else{
    gallery_item.each(function() {
      if(!$(this).hasClass(filterVal)) {
        $(this).addClass('blurme')
        .parent().addClass('info');
      }else{
        $(this).removeClass('blurme')
        .parent().removeClass('info');
      }
    });
  }
  return false;
});

// simply preloader
gallery_img.each(function() {
  $(this).css({opacity: 0}).load(function() {
    $(this).animate({opacity: 1}, 1000);
  }).attr('src', $(this).data('src'))
  .delay(100)
  .attr('data-src','');
});

---

This awesome jQuery plugin is developed by nakome. For more Advanced Usages, please check the demo page or visit the official website.