<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
