Portfolio Filter using jQuery

Developer
Daniel Ilse
Size
4,216 Kb
Views
16,192
  1. Portfolio Filter using jQuery Previews
  2. Portfolio Filter using jQuery HTML Codes
  3. Portfolio Filter using jQuery CSS Codes
  4. Portfolio Filter using jQuery JS Codes

How do I make an portfolio filter using jquery?

Using jQuery to filter Porfolio items and displayed in a grid using Flexbox.. What is a portfolio filter using jquery? How do you make a portfolio filter using jquery? This script and codes were developed by Daniel Ilse on 01 November 2022, Tuesday.

Portfolio Filter using jQuery Previews
IQ Test

Portfolio Filter using jQuery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Filter using jQuery</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio Filter using jQuery - Script Codes CSS Codes

@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;
}

Portfolio Filter using jQuery - Script Codes JS Codes

$(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
Portfolio Filter using jQuery - Script Codes
Portfolio Filter using jQuery - Script Codes
Home Page Home
Developer Daniel Ilse
Username dantilse
Uploaded November 01, 2022
Rating 3
Size 4,216 Kb
Views 16,192
Do you need developer help for Portfolio Filter using jQuery?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniel Ilse (dantilse) Script Codes
Name
Matt Goad Artspace Logo
JQuery nested navigation
Profile Card with Gradient Background Animation
CSS Logo for Redeffect Abesso Furniture
Sass Color Functions
Responsive triangles with pseudo content
JQuery Toggle Divs of Baseball Heros
Session List Display
Team Members
Hamburger Menu Icon Sass Mixin
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!