<p href="" data-rel="all">All</p>
<p data-rel="web">Websites</p>
<p data-rel="flyers">Flyers</p>
<p data-rel="bcards">Business Cards</p>
<div style="clear:both;"></div>
<div id="portfolio">
  <div class="tile web all">
    
  </div>
  <div class="tile bcards all">
    
  </div>
  <div class="tile web all">
    
  </div>
  <div class="tile web all">
    
  </div>
  <div class="tile flyers all">
    
  </div>
  <div class="tile bcards all">
    
  </div>
  <div class="tile flyers all">
    
  </div>
  <div class="tile flyers all">
    
  </div>
  <div class="tile web all">
    
  </div>
  <div class="tile flyers all">
    
  </div>
  <div class="tile web all">
    
  </div>
  <div class="tile bcards all">
    
  </div>
  <div class="tile web all">
    
  </div>
  <div class="tile bcards all">
    
  </div>
  <div class="tile web all">
    
  </div>
  <div class="tile web all">
    
  </div>
  <div class="tile bcards all">
    
  </div>
</div>

<style>#portfolio { width:100%; margin:20px 0px; }
.tile { float:left; min-height:100px; max-height:150px; width:20%; border:1px #fff solid; }
.tile:hover { opacity: 0.5; }
.web { background:#00C5CD;}
.flyers { background: #CC3232;}
.bcards { background: #ddd; }
p{ padding:10px; border-bottom: 1px #ccc dotted; text-decoration: none; font-family: Arial; text-transform:uppercase; font-size: 12px; color: #333; display:block; float:left;}
p:hover { cursor:pointer; background: #333; color:#eee; }
</style>

<script>
$(function() {
    var selectedClass = "";
    $("p").click(function(){
    selectedClass = $(this).attr("data-rel");
    $("#portfolio").fadeTo(100, 0.1);
    $("#portfolio div").not("."+selectedClass).fadeOut();
    setTimeout(function() {
      $("."+selectedClass).fadeIn();
      $("#portfolio").fadeTo(500, 1);
    }, 500);
    
	});
});
</script>