How to create a Portfolio Gallery

How to create a Portfolio Gallery using HTML and CSS?

Table of Contents

The Responsive Portfolio Gallery is used to display your Portfolio on your websites to your users in front end. But if a customer or users want some specific contents, then we need to add some filters on the Portfolio Gallery.

A Super easy way to create attractive and a Responsive Portfolio Gallery with Filtering for your company websites. The Portfolio image gallery is fully Responsive and its supports with all devices like Desktop PC, Tablets, Mobile and MacBook.
You can easily configure in your website.

The key features of the Bootstrap Portfolio Gallery listed below.

Simplicity
Mobile-friendly
Grid layout and Lightbox Modal
Easily Customizability
Auto Slideshow
Thumbnail grid

In this article, we will create a filterable Portfolio Gallery using HTML, CSS, Bootstrap and JavaScript.

In this Portfolio Gallery, we have added some buttons which we will use to filter the images on the basis of CSS Class.

Steps to Create the Responsive Portfolio Gallery with Filtering using HTML CSS & Javascript

Bootstrap Library for Lightbox Gallery

<link rel="stylesheet" href="<a href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" target="_blank" rel="noreferrer noopener">https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css</a>">
<link href="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" target="_blank" rel="noreferrer noopener">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css</a>" rel="stylesheet" >
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css">
<script src="js/jquery-1.6.1.min.js"></script> 
<script src="js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"><gwmw style="display:none;"></gwmw></gwmw><gwmw style="display:none;"></gwmw></gwmw></gwmw><gwmw style="display:none;"></gwmw></gwmw></gwmw></gwmw><gwmw style="display:none;">

The HTML Code

The following HTML code is used to filter the Images from the Image gallery.

 <div align="center">
            <a class="btn btn-default filter-button" data-filter="all">All</a>
            <a class="btn btn-default filter-button" data-filter="html">HTML</a>
            <a class="btn btn-default filter-button" data-filter="css">CSS3</a>
            <a class="btn btn-default filter-button" data-filter="javascript">Javascript</a>
            <a class="btn btn-default filter-button" data-filter="php">PHP</a>
        </div>

<a class="btn btn-default filter-button" data-filter="javascript">Javascript</a>

</div>

The following HTML Code is used to create the Image Gallery.

 <div class="row flex-center popular-gallery galleryh clearfix mb-5">
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter html">
          <div class="single-gallery mb-20">
            <div class="gallery-img"> 
				<img src="images/thumbnails/html-logo.png" alt=""  style=" width: 100%;"/> </div>
            <div class="gallery-details"> <a href="images/thumbnails/html-logo.png" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div>
          </div>
        </div>
       <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter javascript">
          <div class="single-gallery mb-20 ">
            <div class="gallery-img"> 
				<img src="images/thumbnails/js.jpg" alt=""  style=" width: 100%;"/> </div>
            <div class="gallery-details"> <a href="images/thumbnails/js.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div>
          </div>
        </div>
		  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter php javascript">
          <div class="single-gallery mb-20 ">
            <div class="gallery-img"> 
				<img src="images/thumbnails/php-java.jpg" alt=""  style=" width: 100%;"/> </div>
            <div class="gallery-details"> <a href="images/thumbnails/php-java.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div>
          </div>
        </div>
		  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter css">
          <div class="single-gallery mb-20 ">
            <div class="gallery-img"> 
				<img src="images/thumbnails/css.jpg" alt=""  style=" width: 100%;"/> </div>
            <div class="gallery-details"> <a href="images/thumbnails/css.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div>
          </div>
        </div>
		    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter html css">
          <div class="single-gallery mb-20 ">
            <div class="gallery-img"> 
				<img src="images/thumbnails/html-css.jpg" alt=""  style=" width: 100%;"/> </div>
            <div class="gallery-details"> <a href="images/thumbnails/html-css.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div>
          </div>
        </div>
		    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter php">
          <div class="single-gallery mb-20 ">
            <div class="gallery-img"> 
				<img src="images/thumbnails/php.jpg" alt=""  style=" width: 100%;"/> </div>
            <div class="gallery-details"> <a href="images/thumbnails/php.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div>
          </div>
        </div>
      </div>

</div>

</div>

</div>

</div>

</div>

</div>

The JavaScript

$(document).ready(function(){
    $(".filter-button").click(function(){
        var value = $(this).attr('data-filter');
        
        if(value == "all")
        {
            $('.filter').show('1000');
        }
        else
        {
            $(".filter").not('.'+value).hide('4000');
            $('.filter').filter('.'+value).show('4000'); 
        }
    });
    $(".btn").each(function(){
       $(this).click(function(){
          $(this).addClass("active");
          $(this).siblings().removeClass("active");
       });
    });
});

 $(document).ready(function(){
        $("area[rel^='prettyPhoto']").prettyPhoto(); 
        $(".galleryh:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});
        $(".galleryh:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
    });

$(document).ready(function(){

$(".filter-button").click(function(){

var value = $(this).attr('data-filter');

if(value == "all")

{

$('.filter').show('1000');

}

else

{

$(".filter").not('.'+value).hide('4000');

$('.filter').filter('.'+value).show('4000');

}

});

$(".btn").each(function(){

$(this).click(function(){

$(this).addClass("active");

$(this).siblings().removeClass("active");

});

$(document).ready(function(){

$("area[rel^='prettyPhoto']").prettyPhoto();

$(".galleryh:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});

$(".galleryh:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});

});

The CSS

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
body {
	background: #fff;
	font-family: "Roboto", sans-serif;
}
body{
	overflow-x: hidden;
}
.flex-center{
	align-items: center;
}
.filterDiv {
  color: #ffffff;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
}

.show-f {
  display: block;
}

a{
	text-decoration: none;
}

/* Style the buttons */
.filter-button
{
    font-size: 18px;
    border: 1px solid #3444F1;
    border-radius: 5px;
    text-align: center;
    color: #3444F1;
    margin-bottom: 30px;

}
.filter-button:hover
{
    font-size: 18px;
    border: 1px solid #3444F1;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #3444F1;

}

.active
{
    background-color: #3444F1;
    color: white;
}

.popular-gallery .single-gallery {
  position: relative
}
.popular-gallery .single-gallery .gallery-img {
  overflow: hidden;
  position: relative;
  z-index: 0
}
.popular-gallery .single-gallery .gallery-img::before {
  position: absolute;
/*  width: 100%;
  height: 100%;*/
  bottom: 10px;
  top: 10px;
  left: 10px;
  right: 10px;
  content: "";
   z-index: 1;
  -webkit-transition: all .4s ease-out 0s;
  -moz-transition: all .4s ease-out 0s;
  -ms-transition: all .4s ease-out 0s;
  -o-transition: all .4s ease-out 0s;
  transition: all .4s ease-out 0s
}
.popular-gallery .single-gallery .gallery-img img {
  width: 100%;
  transform: scale(1);
  -webkit-transition: all .4s ease-out 0s;
  -moz-transition: all .4s ease-out 0s;
  -ms-transition: all .4s ease-out 0s;
  -o-transition: all .4s ease-out 0s;
  transition: all .4s ease-out 0s;
  min-height: 260px;
    object-fit: cover;
}
.popular-gallery .single-gallery .gallery-details {
  position: absolute;
  left: 0px;
  right: 0;
  top: 40%;
  text-align: center;
  margin: 0 auto;
  -webkit-transition: all .4s ease-out 0s;
  -moz-transition: all .4s ease-out 0s;
  -ms-transition: all .4s ease-out 0s;
  -o-transition: all .4s ease-out 0s;
  transition: all .4s ease-out 0s
}
.popular-gallery .single-gallery .gallery-details h4{
  border: 0px !important;
}
.popular-gallery .single-gallery .gallery-details h4 a {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 2px
}
@media (max-width: 575px) {
  .popular-gallery .single-gallery .gallery-details h4 a {
    font-size: 18px;
    line-height: 1.1
  }
  .courselist {
    margin-left: 0px;
    margin-right: 0px;
  }
}
.popular-gallery .single-gallery .gallery-details p {
  color: #fff;
  font-size: 16px;
  font-weight: 300
}
.popular-gallery .single-gallery .gallery-details .gallery-btn {
  -webkit-transition: all .4s ease-out 0s;
  -moz-transition: all .4s ease-out 0s;
  -ms-transition: all .4s ease-out 0s;
  -o-transition: all .4s ease-out 0s;
  transition: all .4s ease-out 0s;
    padding: 7px 13px;
    color: #3f51b5;
    display: inline-block;
    font-size: 24px;
    visibility: hidden;
    opacity: 0;
}
.popular-gallery .single-gallery .gallery-details .gallery-btn:after {
  content: "\f00e";
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  padding-left: 0px;
	font-size: 40px;
}
.popular-gallery .single-gallery .gallery-details .gallery-btn:hover {
  color: #EA5252
}
.popular-gallery .single-gallery .gallery-details .gallery-btn i {
  font-size: 10px;
  padding: 0;
  margin: 0;
  position: relative;
  left: -3px
}
.single-gallery:hover .gallery-img::before {
  background:rgb(255 255 255 / 51%);
}
.single-gallery:hover .gallery-img img {
  transform: scale(1.05)
}
.single-gallery:hover .gallery-details {
  top: 50%;
  transform: translateY(-50%)
}
.single-gallery:hover .gallery-details .gallery-btn {
  visibility: visible;
  opacity: 1
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");

body {

background: #fff;

font-family: "Roboto", sans-serif;

}

body{

overflow-x: hidden;

}

.flex-center{

align-items: center;

}

.filterDiv {

color: #ffffff;

line-height: 100px;

text-align: center;

margin: 2px;

display: none;

}

.show-f {

display: block;

}

text-decoration: none;

}

/* Style the buttons */

.filter-button

{

font-size: 18px;

border: 1px solid #3444F1;

border-radius: 5px;

text-align: center;

color: #3444F1;

margin-bottom: 30px;

}

.filter-button:hover

{

font-size: 18px;

border: 1px solid #3444F1;

border-radius: 5px;

text-align: center;

color: #ffffff;

background-color: #3444F1;

}

.active

{

background-color: #3444F1;

color: white;

}

.popular-gallery .single-gallery {

position: relative

}

.popular-gallery .single-gallery .gallery-img {

overflow: hidden;

position: relative;

z-index: 0

}

.popular-gallery .single-gallery .gallery-img::before {

position: absolute;

/* width: 100%;

height: 100%;*/

bottom: 10px;

top: 10px;

left: 10px;

right: 10px;

content: "";

z-index: 1;

-webkit-transition: all .4s ease-out 0s;

-moz-transition: all .4s ease-out 0s;

-ms-transition: all .4s ease-out 0s;

-o-transition: all .4s ease-out 0s;

transition: all .4s ease-out 0s

}

.popular-gallery .single-gallery .gallery-img img {

width: 100%;

transform: scale(1);

-webkit-transition: all .4s ease-out 0s;

-moz-transition: all .4s ease-out 0s;

-ms-transition: all .4s ease-out 0s;

-o-transition: all .4s ease-out 0s;

transition: all .4s ease-out 0s;

min-height: 260px;

object-fit: cover;

}

.popular-gallery .single-gallery .gallery-details {

position: absolute;

left: 0px;

right: 0;

top: 40%;

text-align: center;

margin: 0 auto;

-webkit-transition: all .4s ease-out 0s;

-moz-transition: all .4s ease-out 0s;

-ms-transition: all .4s ease-out 0s;

-o-transition: all .4s ease-out 0s;

transition: all .4s ease-out 0s

}

.popular-gallery .single-gallery .gallery-details h4{

border: 0px !important;

}

.popular-gallery .single-gallery .gallery-details h4 a {

color: #fff;

font-size: 14px;

font-weight: 600;

display: inline-block;

margin-bottom: 2px

}

@media (max-width: 575px) {

.popular-gallery .single-gallery .gallery-details h4 a {

font-size: 18px;

line-height: 1.1

}

.courselist {

margin-left: 0px;

margin-right: 0px;

}

.popular-gallery .single-gallery .gallery-details p {

color: #fff;

font-size: 16px;

font-weight: 300

}

.popular-gallery .single-gallery .gallery-details .gallery-btn {

-webkit-transition: all .4s ease-out 0s;

-moz-transition: all .4s ease-out 0s;

-ms-transition: all .4s ease-out 0s;

-o-transition: all .4s ease-out 0s;

transition: all .4s ease-out 0s;

padding: 7px 13px;

color: #3f51b5;

display: inline-block;

font-size: 24px;

visibility: hidden;

opacity: 0;

}

.popular-gallery .single-gallery .gallery-details .gallery-btn:after {

content: "\f00e";

font-family: 'FontAwesome';

font-style: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

padding-left: 0px;

font-size: 40px;

}

.popular-gallery .single-gallery .gallery-details .gallery-btn:hover {

color: #EA5252

}

.popular-gallery .single-gallery .gallery-details .gallery-btn i {

font-size: 10px;

padding: 0;

margin: 0;

position: relative;

left: -3px

}

.single-gallery:hover .gallery-img::before {

background:rgb(255 255 255 / 51%);

}

.single-gallery:hover .gallery-img img {

transform: scale(1.05)

}

.single-gallery:hover .gallery-details {

top: 50%;

transform: translateY(-50%)

}

.single-gallery:hover .gallery-details .gallery-btn {

visibility: visible;

opacity: 1

}

Responsive Portfolio Filter Gallery using HTML CSS & Javascript

Full HTML Code


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio Gallery with Filtering | Best Portfolio Plugin | Photo Gallery with Filter</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css">
<script src="js/jquery-1.6.1.min.js"></script> 
<script src="js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<section class="mt-5">
  <div class="container">
    <div class="row flex-center">
      <div class="col-md-12 text-center ">
        <h2 class="mb-5">Responsive Portfolio Filter Gallery using HTML CSS & Javascript | Filterable Image Gallery</h2>
           <div align="center">
            <a class="btn btn-default filter-button" data-filter="all">All</a>
            <a class="btn btn-default filter-button" data-filter="html">HTML</a>
            <a class="btn btn-default filter-button" data-filter="css">CSS3</a>
            <a class="btn btn-default filter-button" data-filter="javascript">Javascript</a>
            <a class="btn btn-default filter-button" data-filter="php">PHP</a>
        </div>
      </div>
      <div class="row flex-center popular-gallery galleryh clearfix mb-5">
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter html">
          <div class="single-gallery mb-20">
            <div class="gallery-img"> 
				<img src="images/thumbnails/html-logo.png" alt=""  style=" width: 100%;"/> </div>
            <div class="gallery-details"> <a href="images/thumbnails/html-logo.png" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div>
          </div>
        </div>
       <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter javascript">
          <div class="single-gallery mb-20 ">
            <div class="gallery-img"> 
				<img src="images/thumbnails/js.jpg" alt=""  style=" width: 100%;"/> </div>
            <div class="gallery-details"> <a href="images/thumbnails/js.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div>
          </div>
        </div>
		  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter php javascript">
          <div class="single-gallery mb-20 ">
            <div class="gallery-img"> 
				<img src="images/thumbnails/php-java.jpg" alt=""  style=" width: 100%;"/> </div>
            <div class="gallery-details"> <a href="images/thumbnails/php-java.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div>
          </div>
        </div>
		  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter css">
          <div class="single-gallery mb-20 ">
            <div class="gallery-img"> 
				<img src="images/thumbnails/css.jpg" alt=""  style=" width: 100%;"/> </div>
            <div class="gallery-details"> <a href="images/thumbnails/css.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div>
          </div>
        </div>
		    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter html css">
          <div class="single-gallery mb-20 ">
            <div class="gallery-img"> 
				<img src="images/thumbnails/html-css.jpg" alt=""  style=" width: 100%;"/> </div>
            <div class="gallery-details"> <a href="images/thumbnails/html-css.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div>
          </div>
        </div>
		    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 mt-4 filter php">
          <div class="single-gallery mb-20 ">
            <div class="gallery-img"> 
				<img src="images/thumbnails/php.jpg" alt=""  style=" width: 100%;"/> </div>
            <div class="gallery-details"> <a href="images/thumbnails/php.jpg" rel="prettyPhoto[gallery2]" class="gallery-btn"> </a> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script src="js/scripts.js" ></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Portfolio Gallery with Filtering | Best Portfolio Plugin | Photo Gallery with Filter</title>

</head>

<body>

<h2 class="mb-5">Responsive Portfolio Filter Gallery using HTML CSS & Javascript | Filterable Image Gallery</h2>

<a class="btn btn-default filter-button" data-filter="javascript">Javascript</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</body>

</html>

Hope this article will help you to create a Portfolio Gallery for your website.

Download full Source Code for Responsive Portfolio Gallery with Filtering option

Responsive Portfolio Filter Gallery using HTML CSS & Javascript

1 file(s) 376Kb

Download Source Code

Live Demo

December 13, 2022

HTMLCSS

Owl Carousel Product Slider in HTML5

Know Details

jQuery Carousel Slider With Accordion Style Transitions

June 6, 2022

HTMLCSS

jQuery Carousel Slider With Accordion Style Transitions

Know Details

Testimonials HTML Template Free Download

January 15, 2022

HTMLCSS

Testimonials HTML Template Free Download

Know Details

Bootstrap Table with Pagination and Search

January 9, 2022

HTMLCSS

Bootstrap Table with Pagination and Search

Know Details

Attractive Responsive Testimonials Carousel

December 8, 2021

HTMLCSS

Attractive Responsive Testimonials Carousel

Know Details

How To Make Responsive Testimonial Slider

December 7, 2021

HTMLCSS

How To Make Responsive Testimonial Slider

Know Details

How to create a Portfolio Gallery