<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<div class="filter"> 
 <div class="buttons">
   <span class="all">all</span>
   <span class="foto">foto</span>
   <span class="site">site</span>
   <span class="temp">template</span>
  </div>
  <div class="items"> 
    <div class="foto item"></div>
    <div class="site item"></div>
    <div class="foto item"></div>
    <div class="temp item"></div>
    <div class="foto item"></div>
    <div class="site item"></div>
    <div class="temp item"></div>
    <div class="temp item"></div>
    <div class="site item"></div>
    <div class="temp item"></div>
    <div class="site item"></div>
    <div class="temp item"></div>
    <div class="temp item"></div>
    <div class="temp item"></div>
    <div class="temp item"></div>
    <div class="foto item"></div>
    <div class="site item"></div>
    <div class="foto item"></div>
    <div class="temp item"></div>
    <div class="foto item"></div>
    <div class="site item"></div>
    <div class="temp item"></div>
    <div class="temp item"></div>
    <div class="site item"></div>
    <div class="temp item"></div>
    <div class="site item"></div>
    <div class="temp item"></div>
    <div class="temp item"></div>
    <div class="temp item"></div>
    <div class="temp item"></div>
    <div class="foto item"></div>
    <div class="site item"></div>
    <div class="foto item"></div>
    <div class="temp item"></div>
    <div class="foto item"></div>
    <div class="site item"></div>
    <div class="temp item"></div>
    <div class="temp item"></div>
    <div class="site item"></div>
    <div class="temp item"></div>
    <div class="site item"></div>
    <div class="temp item"></div>
    <div class="temp item"></div>
    <div class="temp item"></div>
    <div class="temp item"></div>
  </div>
  <div class="clear"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

*{
  margin:0;
  padding:0;
}
.filter{
  width:100%;
  min-height:200px;
  margin:10px auto;
  padding-top:10px;
  padding-bottom:10px;
}
.buttons{
  width:90%;
  margin:auto;
  margin-bottom:50px;
  display:block;
}
.buttons span{
  outline:1px dashed #000;
  padding:4px 10px;
  cursor:pointer;
}
.buttons span:hover{
  color:tomato;
}
.items{
  width:90%;
  margin:auto;
}

div.site{background:red;}
div.temp{background:green;}
div.foto{background:blue;}

.item{
  float:left;
  width:90px;
  height:90px;
  outline:2px solid #fff;
}

.clear,.clear:before,.clear:after{
  content:"";
  display:block;
  clear:both;
}

$(document).on("click","span.all", function(){
      $("div.item").show().effect("fade","fast");
})

$("span.foto").on("click", function(){
        $("div.item").hide();
        $("div.foto").show().effect("fade","fast");
})

$("span.site").on("click", function(){
        $("div.item").hide();
        $("div.site").show().effect("fade","fast");
})
$("span.temp").on("click", function(){
        $("div.item").hide();
        $("div.temp").show().effect("fade","fast");
})

/*
  .slideUp(); - скрыть
 .slideDown(); - показать
*/