JSFiddle - React, Tailwind, and code Playground
by qwertylist
HTML
<div class="portfolio section s2">
<div class="container portfolio-head">
<h3> Portfolio</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<!---- start-portfolio-script----->
<!----//End-portfolio-script----->
<ul id="filters" class="clearfix">
<li><span class="filter active" data-filter="app card icon logo web">All</span></li>
<li><span class="filter" data-filter="app">Branding</span></li>
<li><span class="filter" data-filter="card">Illustraions</span></li>
<li><span class="filter" data-filter="icon">Web design</span></li>
</ul>
<div id="portfoliolist" style=" ">
<div class="portfolio logo1 mix_all" data-cat="logo" style=" ">
<div class="portfolio-wrapper">
<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go thickbox"><div class="b-line b-line1"></div><div class="b-line b-line2"></div><div class="b-line b-line3"></div><div class="b-line b-line4"></div><div class="b-line b-line5"></div>
<img src="http://amatol.ucoz.com/images/3.jpg"><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 "></h2>
</div></a>
</div>
</div>
<div class="portfolio app mix_all" data-cat="app" style=" display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go thickbox"><div class="b-line b-line1"></div><div class="b-line b-line2"></div><div class="b-line b-line3"></div><div class="b-line b-line4"></div><div class="b-line b-line5"></div>
<img src="http://amatol.ucoz.com/images/3.jpg" style="top: 0px;"><div...CSS
/*--works--*/
.works{
background:#fff;
padding:5% 0;
}
#filters {
margin: 1% 0 3.3%;
padding: 0;
list-style: none;
text-align: center;
}
#filters li {
display:inline-block;
}
#filters li span {
display: inline-block;
padding: 10px 30px;
text-decoration: none;
color: #666666;
cursor: pointer;
font-size: 1em;
font-weight: 400;
text-transform: uppercase;
border: 2px solid #666666;
border-radius: 4px;
margin-right: 0.5em;
}
#filters li span.active {
background:#E74C3C;
border: 2px solid #E74C3C;
color: #FFF;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
}
#portfoliolist .portfolio {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
width: 25%;
display:none;
float:left;
overflow:hidden;
}
.portfolio-wrapper {
overflow:hidden;
position: relative !important;
cursor:pointer;
}
.portfolio img {
max-width:100%;
/*--position: relative;--*/
transition: all 300ms!important;
-webkit-transition: all 300ms!important;
-moz-transition: all 300ms!important;
display: block;
}
.portfolio .label {
position: absolute;
width: 100%;
height:40px;
bottom:-40px;
}
.portfolio .label-bg {
background: #22B4B8;
width: 100%;
height:100%;
position: absolute;
top:0;
left:0;
}
.portfolio .label-text {
color:#fff;
position: relative;
z-index:500;
padding:5px 8px;
}
.portfolio .text-category {
display:block;
font-size:9px;
font-size: 12px;
text-transform:uppercase;
}
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
.clear {
clear:...JavaScript
$(function () {
var filterList = {
init: function () {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function () {
// Simple parallax effect
$('#portfoliolist .portfolio').hover(
function () {
$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
},
function () {
$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
}
);
}
};
// Run the show!
filterList.init();
});
jQuery(document).ready(function(){
/* Slide */
jQuery('#slide a').each(function(index, element) {
jQuery(this).hoverdir();
});
/* Stroke */
jQuery('.b-link-stroke').prepend('<div class="b-top-line"></div>');
jQuery('.b-link-stroke').prepend('<div class="b-bottom-line"></div>');
/* Twist */
jQuery('.b-link-twist').prepend('<div class="b-top-line"><b></b></div>');
jQuery('.b-link-twist').prepend('<div class="b-bottom-line"><b></b></div>');
jQuery('.b-link-twist img').each(function(index, element) {
jQuery(this).css('visibility','hidden');
jQuery(this).parent().find('.b-top-line, .b-bottom-line').css('background-image','url('+jQuery(this).attr('src')+')');
});
/* Flip */
jQuery('.b-link-flip').prepend('<div class="b-top-line"><b></b></div>');
jQuery('.b-link-flip').prepend('<div class="b-bottom-line"><b></b></div>');
jQuery('.b-link-flip img').each(function(index, element) {
jQuery(this).css('visibility','hidden');
jQuery(this).parent().find('.b-top-line,...