<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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);
$primary-font : "Merriweather", serif;
$secondary-font : "Montserrat", sans-serif;
$white : rgb(255,255,255);
$beige : rgb(246,246,246);
$grey : rgb(89,89,89);
$black : rgb(0,0,0);
body {
font-family: $primary-font
}
h1, h2, h3, h4, h5, h6 {
font-family: $secondary-font;
}
*, *:before, *:after {
box-sizing: border-box;
}
#main {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
max-width: 1260px;
margin: 0 auto;
}
// list styles
.nav {
display: flex;
flex-flow: row wrap;
justify-content: center;
flex: 1 1 auto;
padding: 10px 20px;
margin-top: 40px;
}
.nav-item {
position: relative;
padding: 0 5px;
margin: 0 5px;
font: {
size: 1.5em;
weight: 700;
}
color: $grey;
text-decoration: none;
line-height: 1.5;
&:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: $grey;
transition: all 500ms;
}
&.active {
color: $black;
transition: all 350ms;
&:before {
width: 100%;
}
}
}
// Portfolio Styles
.portfolio {
display: flex;
flex-flow: row wrap;
padding: 0;
margin: 0;
list-style: none;
}
.project {
position: relative;
flex: 1 0 calc(100% - 20px);
margin: 10px;
&:hover {
.project-info {
background: rgba($grey,.7);
}
}
@media (min-width: 520px) {
flex: 0 0 calc((100% / 2) - 20px);
}
@media (min-width: 860px) {
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: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
color: $beige;
background: rgba($grey,.8);
opacity: 0;
transition: all 350ms ease-in;
&:hover {
opacity: 1;
}
@media (max-width: 520px) {
opacity: .8;
}
}
.project-info-title {
margin: 0 0 .5em;
font-size: 2.5em;
text: {
align: center;
transform: uppercase;
}
}
.project-info-button {
padding: .5em 1em;
color: inherit;
text: {
decoration: none;
}
border: 1px solid $beige;
border-radius: 3px;
transition: all 350ms;
&:hover {
color: $grey;
background: $beige;
border-color: $beige;
}
}
$(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
