Mixitup - .nav-pills{} example

by bizamajig

HTML

<link rel="stylesheet" href="http://aliensix.com/fuck/css/bootstrap.min.css">
<script src="http://aliensix.com/fuck/js/bootstrap.min.js"></script>
<script src="http://aliensix.com/fuck/js/jquery.easing.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
	<!-- Begin Portfolio -->
	<section>

		<div class="container-fluid portfolio" style="padding-bottom:0;">

			<!-- Page Title -->
			<div class="row page-title-2">
				<div class="col-lg-12">
					<h3>Portfolio</h3>
					<hr>
					<p>We also create some other stuff.</p>
				</div>
			</div>

			<!-- Portfolio Filter -->
			<div data-scroll-reveal="enter left and move 50px over 1s" class="container-fluid text-center">
			  <ul class="nav nav-pills">
			    <li class="filter" data-filter="all">all</li>
			    <li class="filter" data-filter="print">print</li>
			    <li class="filter" data-filter="web">web</li>
			    <li class="filter" data-filter="branding">branding</li>
			    <li class="filter" data-filter="illustrations">illustrations</li>
			  </ul>
			</div>

			<!-- Portfolio Items -->
			<div class="container-fluid port-holder">
			  <ul id="myPortfolio" class="no-padding">
			    <li class="item branding col-xs-3 no-padding">
			    	<a data-toggle="modal" href="http://aliensix.com/fuck/projects/project-1.html" data-target="#myModal">
						<img src="http://aliensix.com/fuck/img/projects/thumbs/branding1.jpg" alt="..." />
						<span class="portfolio-hover">
						  <span>
						  	<h4 class="portfolio-title">Beach Sand</h4>
						  	<p class="portfolio-category">Branding</p>
						  </span>
						</span>
					</a>
			    </li>
			    <li class="item web col-xs-3 no-padding">
			    	<a data-toggle="modal" href="http://aliensix.com/fuck/projects/project-2.html" data-target="#myModal">
                        <img src="http://aliensix.com/fuck/img/projects/thumbs/web1.jpg" alt="..." />
						<span class="portfolio-hover">
						  <span>
						  	<h4...

CSS

/* =Portfolio
-------------------------------------------------------------- */
.portfolio { padding: 120px 0 120px 0; }

#myPortfolio .item {
  xdisplay: none;
  xopacity: 0;
}

.nav-pills {
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 50px;
	font-weight: 300;
	display: inline-block; 
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
	background-color: transparent;
	color: #272727;
}

.portfolio ul.nav a {
	color: #bdbdbd;
	border-radius: 0;
}

.portfolio ul.nav a:hover {
	color: #272727;
}

.nav-pills {
    text-align: center;
}

.nav-pills > li {
    float: none;
    display: inline-block;
    padding: 0 15px 0 15px;
   	cursor: pointer;
}

.portfolio ul li {
	list-style-type: none;
}

.portfolio ul li:hover span.portfolio-hover {
	opacity: 1;
}

.portfolio img {
	max-width: 100%;
	width: 100%;
	height: 100% !important;
}

span.portfolio-hover {
	background: rgba(39,39,39,0.95);
	color: #8e8e8e;
	width: 100%;
	height: 100%;
	text-align: center;
	font: 0/0 a;
	left: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	opacity: 0;
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}

span.portfolio-hover:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

span.portfolio-hover span {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	font: normal 18px "Open Sans", arial, sans-serif;
	font-weight: 300;
}

.portfolio-title {
	font-size: 18px;
	text-transform: none;
	color: #fff;
	margin: 0 0 5px !important;
}

.portfolio-category {
	font-size: 14px;
}

.modal {
	padding-top: 5%;
}

.modal-backdrop.in {
	opacity: .9;
}

.modal-content {
	border: 0;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.modal button.close {
	border: 2px solid #272727;
	padding: 5px 5px 5px 5px;
	box-shadow: none;
	-webkit-box-shadow: none;
	display: inline-block;
	float:...

JavaScript

// run mixitup
/*
  $('#myPortfolio').mixItUp({
    targetSelector: '.item',
    transitionSpeed: 600
  });
*/
$('#myPortfolio').mixItUp();