Simple Portfolio Filter

index.html

<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>

script.js

$(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);
		
	});
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Simple Portfolio Filter.markdown

Simple Portfolio Filter

Forked from creotip's Pen Simple Portfolio Filter.

A Pen by William Fortuna de Moraes on CodePen.

License.

style.css

#portfolio { width:100%; margin:20px 0px; }
.tile { float:left; height:200px; 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; }