"filters"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <main id="main"> <nav class="nav"> <a href="#" class="nav-item active" data-rel="project">All</a> <a href="#" class="nav-item" data-rel="option-1">Silhouettes</a> <a href="#" class="nav-item" data-rel="option-2">Competitions</a> <a href="#" class="nav-item" data-rel="option-3">Extreme</a> </nav> <ul class="portfolio"> <li class="project option-1"> <div class="project-image"><img src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image" /></div> <div class="project-info"> <h2 class="project-info-title">Cricket Tourney</h2> <a class="project-info-button" href="#">View Project</a> </div> </li> <li class="project option-2"> <div class="project-image"><img src="http://lorempixel.com/400/400/sports/2/" alt="Sports Image" /></div> <div class="project-info"> <h2 class="project-info-title">Surfing</h2> <a class="project-info-button" href="#">View Project</a> </div> </li> <li class="project option-3"> <div class="project-image"><img src="http://lorempixel.com/400/400/sports/3/" alt="Sports Image" /></div> <div class="project-info"> <h2 class="project-info-title">Tour De Force</h2> <a class="project-info-button" href="#">View Project</a> </div> </li> <li class="project option-2"> <div class="project-image"><img src="http://lorempixel.com/400/400/sports/10/" alt="Sports Image" /></div> <div class="project-info"> <h2 class="project-info-title">Baseball Season</h2> <a class="project-info-button" href="#">View Project</a> </div> </li> <li class="project option-3"> <div class="project-image"><img src="http://lorempixel.com/400/400/sports/5/" alt="Sports Image" /></div> <div class="project-info"> <h2 class="project-info-title">BMX Arrives</h2> <a class="project-info-button" href="#">View Project</a> </div> </li> <li class="project option-1"> <div class="project-image"><img src="http://lorempixel.com/400/400/sports/6/" alt="Sports Image" /></div> <div class="project-info"> <h2 class="project-info-title">World Cup 2016</h2> <a class="project-info-button" href="#">View Project</a> </div> </li> <li class="project option-3"> <div class="project-image"><img src="http://lorempixel.com/400/400/sports/7/" alt="Sports Image" /></div> <div class="project-info"> <h2 class="project-info-title">100 Meter Swim</h2> <a class="project-info-button" href="#">View Project</a> </div> </li> <li class="project option-1"> <div class="project-image"><img src="http://lorempixel.com/400/400/sports/8/" alt="Sports Image" /></div> <div class="project-info"> <h2 class="project-info-title">Kung Fu</h2> <a class="project-info-button" href="#">View Project</a> </div> </li> <li class="project option-2"> <div class="project-image"><img src="http://lorempixel.com/400/400/sports/9/" alt="Sports Image" /></div> <div class="project-info"> <h2 class="project-info-title">Women's Relay</h2> <a class="project-info-button" href="#">View Project</a> </div> </li> </ul> </main>
@import url(https://fonts.googleapis.com/css?family=Montserrat:700); @import url(https://fonts.googleapis.com/css?family=Merriweather); body { font-family: "Merriweather", serif; } h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", sans-serif; } *, *:before, *:after { box-sizing: border-box; } #main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; max-width: 1260px; margin: 0 auto; } .nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 10px 20px; margin-top: 40px; } .nav-item { position: relative; padding: 0 5px; margin: 0 5px; font-size: 1.5em; font-weight: 700; color: #595959; text-decoration: none; line-height: 1.5; } .nav-item:before { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #595959; -webkit-transition: all 500ms; transition: all 500ms; } .nav-item.active { color: black; -webkit-transition: all 350ms; transition: all 350ms; } .nav-item.active:before { width: 100%; } .portfolio { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; padding: 0; margin: 0; list-style: none; } .project { position: relative; -webkit-box-flex: 1; -ms-flex: 1 0 calc(100% - 20px); flex: 1 0 calc(100% - 20px); margin: 10px; } .project:hover .project-info { background: rgba(89, 89, 89, 0.7); } @media (min-width: 520px) { .project { -webkit-box-flex: 0; -ms-flex: 0 0 calc((100% / 2) - 20px); flex: 0 0 calc((100% / 2) - 20px); } } @media (min-width: 860px) { .project { -webkit-box-flex: 0; -ms-flex: 0 0 calc((100% / 3) - 20px); flex: 0 0 calc((100% / 3) - 20px); } } .project-image img { display: block; width: 100%; height: auto; } .project-info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 40px; color: #f6f6f6; background: rgba(89, 89, 89, 0.8); opacity: 0; -webkit-transition: all 350ms ease-in; transition: all 350ms ease-in; } .project-info:hover { opacity: 1; } @media (max-width: 520px) { .project-info { opacity: .8; } } .project-info-title { margin: 0 0 .5em; font-size: 2.5em; text-align: center; text-transform: uppercase; } .project-info-button { padding: .5em 1em; color: inherit; text-decoration: none; border: 1px solid #f6f6f6; border-radius: 3px; -webkit-transition: all 350ms; transition: all 350ms; } .project-info-button:hover { color: #595959; background: #f6f6f6; border-color: #f6f6f6; }
$(document).ready(function(){ $('.nav-item').click(function(){ // reset active class $('.nav-item').removeClass("active"); // add active class to selected $(this).addClass("active"); // return needed to make function work return false; }); $(function() { // create an empty variable var selectedClass = ""; // call function when item is clicked $(".nav-item").click(function(){ // assigns class to selected item selectedClass = $(this).attr("data-rel"); // fades out all portfolio items $(".portfolio li").fadeOut(300); // fades in selected category $(".portfolio li." + selectedClass).delay(300).fadeIn(300); }); }); }); // document ready

Related: See More


Questions / Comments: