xxxxxxxxxx1
<div class="container my-5">2
3
<!-- Section -->4
<section>5
6
<style>7
.gallery {8
-webkit-column-count: 3;9
-moz-column-count: 3;10
column-count: 3;11
-webkit-column-width: 33%;12
-moz-column-width: 33%;13
column-width: 33%; 14
}15
.gallery .pics {16
-webkit-transition: all 350ms ease;17
transition: all 350ms ease; 18
}19
.gallery .animation {20
-webkit-transform: scale(1);21
-ms-transform: scale(1);22
transform: scale(1); 23
}24
25
@media (max-width: 450px) {26
.gallery {27
-webkit-column-count: 1;28
-moz-column-count: 1;29
column-count: 1;30
-webkit-column-width: 100%;31
-moz-column-width: 100%;32
column-width: 100%;33
}34
}35
36
@media (max-width: 400px) {37
.btn.filter {38
padding-left: 1.1rem;39
padding-right: 1.1rem;40
}41
}42
button.close {43
position: absolute;44
right: 0;45
z-index: 2;46
padding-right: 1rem;47
padding-top: .6rem;48
}49
</style>50
51
<!-- Modal -->52
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">53
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">54
<div class="modal-content">55
<div class="modal-body p-0">56
<button type="button" class="close" data-dismiss="modal" aria-label="Close">57
<span aria-hidden="true">×</span>58
</button>59
60
<!-- Grid row -->61
<div class="row">62
63
<!-- Grid column -->64
<div class="col-md-6 py-5 pl-5">65
66
<h5 class="font-weight-normal mb-3">Paper cup mockup</h5>67
68
<p class="text-muted">Key letters, explain which writing we he carpeting or fame, the itch expand medical amped through constructing time. And scarfs, gain, get showed accounts decades.</p>69
70
<ul class="list-unstyled font-small mt-5">71
<li>72
<p class="text-uppercase mb-2"><strong>Client</strong></p>73
<p class="text-muted mb-4">Envato Inc.</p>74
</li>75
76
<li>77
<p class="text-uppercase mb-2"><strong>Date</strong></p>78
<p class="text-muted mb-4">June 27, 2019</p>79
</li>80
81
<li>82
<p class="text-uppercase mb-2"><strong>Skills</strong></p>83
<p class="text-muted mb-4">Design, HTML, CSS, Javascript</p>84
</li>85
86
<li>87
<p class="text-uppercase mb-2"><strong>Address</strong></p>88
<a href="https://mdbootstrap.com/docs/jquery/design-blocks/">MDBootstrap</a>89
</li>90
</ul>91
92
</div>93
<!-- Grid column -->94
95
<!-- Grid column -->96
<div class="col-md-6">97
98
<div class="view rounded-right">99
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Vertical/5.jpg" alt="Sample image">100
</div>101
102
</div>103
<!-- Grid column -->104
105
</div>106
<!-- Grid row -->107
108
</div>109
</div>110
</div>111
</div>112
113
<h6 class="font-weight-bold text-center grey-text text-uppercase small mb-4">portfolio</h6>114
<h3 class="font-weight-bold text-center dark-grey-text pb-2">Product Designs</h3>115
<hr class="w-header my-4">116
<p class="lead text-center text-muted pt-2 mb-5">You can find several product design by our professional team in this section.</p>117
118
<!-- Grid row -->119
<div class="row">120
121
<!-- Grid column -->122
<div class="col-md-12 dark-grey-text d-flex justify-content-center mb-5">123
124
<button type="button" class="btn btn-flat btn-lg m-0 px-3 py-1 filter" data-rel="all">All</button>125
<p class="font-weight-bold mb-0 px-1 py-1">/</p>126
<button type="button" class="btn btn-flat btn-lg m-0 px-3 py-1 filter" data-rel="1">Design</button>127
<p class="font-weight-bold mb-0 px-1 py-1">/</p>128
<button type="button" class="btn btn-flat btn-lg m-0 px-3 py-1 filter" data-rel="2">Mockup</button>129
130
</div>131
<!-- Grid column -->132
133
</div>134
<!-- Grid row -->135
136
<!-- Grid row -->137
<div class="gallery mb-5" id="gallery">138
139
<!-- Grid column -->140
<div class="mb-3 pics all 2 animation">141
<a data-toggle="modal" data-target="#basicExampleModal">142
<img class="img-fluid z-depth-1 rounded" src="https://mdbootstrap.com/img/Photos/Others/images/58.jpg" alt="Card image cap">143
</a>144
</div>145
<!-- Grid column -->146
147
<!-- Grid column -->148
<div class="mb-3 pics animation all 1">149
<a data-toggle="modal" data-target="#basicExampleModal">150
<img class="img-fluid z-depth-1 rounded" src="https://mdbootstrap.com/img/Photos/Vertical/7.jpg" alt="Card image cap">151
</a>152
</div>153
<!-- Grid column -->154
155
<!-- Grid column -->156
<div class="mb-3 pics animation all 1">157
<a data-toggle="modal" data-target="#basicExampleModal">158
<img class="img-fluid z-depth-1 rounded" src="https://mdbootstrap.com/img/Photos/Vertical/4.jpg" alt="Card image cap">159
</a>160
</div>161
<!-- Grid column -->162
163
<!-- Grid column -->164
<div class="mb-3 pics all 2 animation">165
<a data-toggle="modal" data-target="#basicExampleModal">166
<img class="img-fluid z-depth-1 rounded" src="https://mdbootstrap.com/img/Photos/Others/images/63.jpg" alt="Card image cap">167
</a>168
</div>169
<!-- Grid column -->170
171
<!-- Grid column -->172
<div class="mb-3 pics all 2 animation">173
<a data-toggle="modal" data-target="#basicExampleModal">174
<img class="img-fluid z-depth-1 rounded" src="https://mdbootstrap.com/img/Photos/Others/images/64.jpg" alt="Card image cap">175
</a>176
</div>177
<!-- Grid column -->178
179
<!-- Grid column -->180
<div class="mb-3 pics animation all 1">181
<a data-toggle="modal" data-target="#basicExampleModal">182
<img class="img-fluid z-depth-1 rounded" src="https://mdbootstrap.com/img/Photos/Vertical/5.jpg" alt="Card image cap">183
</a>184
</div>185
<!-- Grid column -->186
187
</div>188
<!-- Grid row -->189
190
</section>191
<!-- Section -->192
193
</div>1
1
xxxxxxxxxx1
$(function () {2
var selectedClass = "";3
$(".filter").click(function () {4
selectedClass = $(this).attr("data-rel");5
$("#gallery").fadeTo(100, 0.1);6
$("#gallery div").not("." + selectedClass).fadeOut().removeClass('animation');7
setTimeout(function () {8
$("." + selectedClass).fadeIn().addClass('animation');9
$("#gallery").fadeTo(300, 1);10
}, 300);11
});12
}); Console errors: 0