Portfolio Filter Gallery

index.html

<section class="portfolio section">
  <div class="container">
    <div class="top-side">
      <h4 class="title">MY WORKS</h4>
      <h2>PORTFOLIO</h2>
    </div>
    
    <div class="filters">
      <ul>
        <li class="active" data-filter="*">All</li>
        <li data-filter=".corporate">Corporate</li>
        <li data-filter=".personal">Personal</li>
        <li data-filter=".agency">Agency</li>
        <li data-filter=".portal">Portal</li>
      </ul>
    </div>
    
    <div class="filters-content">
      <div class="row grid">
        <div class="col-sm-4 all corporate">
          <div class="item">
            <img src="http://themes.muffingroup.com/betheme/documentation/doc-images/muffin-options/custom-js.png" alt="Work 1">
            <div class="p-inner">
              <h5>Work 1</h5>
              <div class="cat">Corporate</div>
            </div>
          </div>
        </div>
        <div class="col-sm-4 all personal">
          <div class="item">
            <img src="http://themes.muffingroup.com/betheme/documentation/doc-images/muffin-options/custom-js.png" alt="Work 1">
            <div class="p-inner">
              <h5>Work 1</h5>
              <div class="cat">Personal</div>
            </div>
          </div>
        </div>
        <div class="col-sm-4 all agency">
          <div class="item">
            <img src="http://themes.muffingroup.com/betheme/documentation/doc-images/muffin-options/custom-js.png" alt="Work 1">
            <div class="p-inner">
              <h5>Work 1</h5>
              <div class="cat">Agency</div>
            </div>
          </div>
        </div>
        <div class="col-sm-4 all portal">
          <div class="item">
            <img src="http://themes.muffingroup.com/betheme/documentation/doc-images/muffin-options/custom-js.png" alt="Work 1">
            <div class="p-inner">
              <h5>Work 1</h5>
              <div class="cat">Portal</div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    
  </div>
</section>

portfolio-filter-gallery.markdown

Portfolio Filter Gallery

A Pen by weisk on CodePen.

License.

script.js

$('.filters ul li').click(function(){
  $('.filters ul li').removeClass('active');
  $(this).addClass('active');
  
  var data = $(this).attr('data-filter');
  $grid.isotope({
    filter: data
  })
});

var $grid = $(".grid").isotope({
  itemSelector: ".all",
  percentPosition: true,
  masonry: {
    columnWidth: ".all"
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script>

style.sass

.section
  padding: 30px 0
  color: #333
  
  .top-side
    text-align: center
  
    .title
      font-weight: 500
      font-size: 15px
      display: inline-block
    
      &:after
        content: ''
        display: block
        width: 50%
        border-bottom: 1px solid #494949
        margin: 8px auto
    
    h2
      font-weight: 700
      
  &.portfolio
    .filters
      text-align: center
      margin-top: 50px
      
      ul
        padding: 0
      
        li
          list-style: none
          display: inline-block
          padding: 20px 30px
          cursor: pointer
          position: relative

          &:after
            content: ''
            display: block
            width: calc(0% - 60px)
            position: absolute
            height: 2px
            background: #333
            transition: width 350ms ease-out

          &:hover
            &:after
              width: calc(100% - 60px)
              transition: width 350ms ease-out

          &.active
            &:after
              width: calc(100% - 60px)
            
    .filters-content
      margin-top: 50px
      
      .show
        opacity: 1
        visibility: visible
        transition: all 350ms
        
      .hide
        opacity: 0
        visibility: hidden
        transition: all 350ms
      
      .item
        text-align: center
        cursor: pointer
        margin-bottom: 30px
        
        .p-inner
          padding: 20px 30px
          box-shadow: 0 0 5px rgba(0,0,0,.3)
          
          h5
            font-size: 15px
            
          .cat
            font-size: 13px
        
        img
          width: 100%

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />