Skip to content

Instantly share code, notes, and snippets.

@weisk
Created October 23, 2020 13:44
Show Gist options
  • Save weisk/9f2e839837a2b1002b2ae01044a6d4ae to your computer and use it in GitHub Desktop.
Save weisk/9f2e839837a2b1002b2ae01044a6d4ae to your computer and use it in GitHub Desktop.
Portfolio Filter Gallery
<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>
$('.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"
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3.0.4/dist/isotope.pkgd.min.js"></script>
.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%
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment