<div class="wrap">
  <ul class="tabs">
     <li><a data-filter=".group-1" href="#">Group 1</a></li>
     <li><a data-filter=".group-2" href="#">Group 2</a></li>
  </ul>
  
  <ul class="portfolio">
    <li class="group-1">
      <figure>
        <img src="http://farm3.staticflickr.com/2675/4029465977_e0ec2d53c6_z.jpg?zz=1" alt="placeholder" />
        <h3>The Title</h3><figcaption><a class="" href="#">link</a></figcaption>
      </figure>
    </li>
    <li class="group-2">
      <figure>
        <img src="http://farm1.staticflickr.com/212/461888176_cd0894c52c_z.jpg?zz=1" alt="placeholder" />
        <h3>The Title</h3><figcaption><a href="#">link</a></figcaption>
      </figure>
    </li>
    
    <li class="group-1">
      <figure>
        <img src="http://farm3.staticflickr.com/2431/3949931873_c5f441a386_b.jpg?zz=1" alt="placeholder" />
        <h3>The Title</h3><figcaption><a href="#">link</a></figcaption>
      </figure>
    </li>
    
    <li class="group-1">
      <figure>
        <img src="http://farm3.staticflickr.com/2431/3949931873_c5f441a386_b.jpg" alt="placeholder" />
        <h3>The Title</h3><figcaption><a href="#">link</a></figcaption>
      </figure>
    </li>
     <li class="group-2">
      <figure>
        <img src="http://farm1.staticflickr.com/212/461888176_cd0894c52c_z.jpg?zz=1" alt="placeholder" />
        <h3>The Title</h3><figcaption><a href="#">link</a></figcaption>
      </figure>
    </li>
    <li class="group-1">
      <figure>
        <img src="http://farm3.staticflickr.com/2675/4029465977_e0ec2d53c6_z.jpg?zz=1" alt="placeholder" />
        <h3>The Title</h3><figcaption><a href="#">link</a></figcaption>
      </figure>
    </li>
  </ul>
</div>
@import "compass/css3";

$pink: #D29990;

* {
  @include box-sizing(border-box);
}

body {
  background-color: #fafafa;
}

img {
   width: 100%;
   height: auto;
   display: block;
  @include transition( all .4s ease-in-out );
}

.wrap {
   max-width: 1000px;
   margin: 0 auto;
   padding-left: 20px;
}

.portfolio {
  margin: 0;
  overflow: hidden;
  padding: 0;


  li {
    float: left;
    width: 100%;
    list-style: none;
    @include transition( all .4s ease-in-out );
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
  }
  
  figure {
    margin: 0 20px 20px 0;
    position: relative;
    text-align: center;
    border: 3px solid #000;
    @include border-radius(8px);
    overflow: hidden;
    background: url('http://www.seanmichael.me/bathtubgin/wp-content/themes/sean-michael-design/images/fancybox_overlay.png') repeat transparent;
    @include transition( all .4s ease-in-out );
  }
  
  figure:hover {
    border: 3px solid $pink;
    
    img {
      opacity: .3;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      @include transform( scale(5));
      
    }
    
    figcaption {
      top: 50%;
      margin-top: -20px;
    }
    
    h3 {
      bottom: 70%;
    }
  }
  
  figcaption {
      position: absolute;
      width: 100%;
      top: 100%; left: 0;
      @include transition( all .2s ease-in-out .2s); 
  }
}

a {
    background-color: $pink;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-shadow: 0 -1px 1px saturate( darken($pink, 20%), 20%);
    text-decoration: none;
    color: #fff;
    width: 50px; height: 50px;
    line-height: 50px;
    @include border-radius(50%);
    display: inline-block;
    @include transition( all .2s ease-in-out);
  
    &:hover {
      background-color: saturate( $pink, 20%);
    }
}

h3 {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba( black, .6);
    font-weight: 500;
    padding: 1em .7em;
    @include border-radius(50%);
    position: absolute;
    bottom: 100%; left: 0;
    width: 100%;
    display: inline-block;
    padding: 0; margin: 0;
    @include transition( all .15s ease-in-out .4s);
}

.tabs {
  margin: 0 0 20px 0;
  padding: 0;
  overflow: hidden;
  
  li {
    list-style: none;
    float: left;
    margin: 20px 20px 0 0;
  } 
}

[data-filter*="group"] {
    @include border-radius(8px);
    width: auto; height: auto;
    padding: 0 1em;
    border-bottom: 4px solid darken( $pink, 10%);
    position: relative; 
    @include transition(none);
  
    &:active {
      top: 3px;
      border-bottom: none;
    }
    
    &.active {
       background-color: saturate( $pink, 20%);
    }
}

@media (min-width: 460px) {
  .portfolio li {
    width: 50%;
  }
}

@media (min-width: 740px) {
  .portfolio li {
    width: 33%;
  }
}
View Compiled
//Functionality for FILTER BUTTONS
$(document).ready( function () {
  $('.tabs').find('a').click( function (e) {
    var theFilter = $(this).data('filter');
    
    e.preventDefault();
    $('.tabs').find('a').removeClass('active');
    $(this).addClass('active');
    
   $('.portfolio').find('li').show(); $('.portfolio').find('li').not(theFilter).hide();
    
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js