Check out this awesome box grid https://i.sstatic.net/qbmQz.jpg
But here's the issue: when I add a data filter and switch between filters, the images always appear in the same location and size as the original grid. Is there any way to make the filtered images all display in the same size? Here's my grid code:
<div class="container">
<div class="text-center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="bootstrap">BootStrap</button>
<button class="btn btn-default filter-button" data-filter="bootstrax">BootStrax</button>
<button class="btn btn-default filter-button" data-filter="purecss">Pure CSS</button>
</div>
<div class="container container-box">
<style>
.container-box{
width: 600px; }
</style>
<div class="row">
<div class="col-12"><img width="600" class="img-fluid pb-3 filter bootstrax "
src="./images/01.jpg" alt=""></div>
</div>
<div class="row g-3">
<div class="col-4"><img width="200" class="img-fluid filter bootstrap"
src="./images/02.jpg" alt=""></div>
<div class="col-4"><img width="200" class="img-fluid filter purecss"
src="./images/03.jpg" alt=""></div>
<div class="col-4"><img width="200" class="img-fluid filter bootstrax"
src="./images/04.jpg" alt=""></div>
</div>
</div>
</div>
$(document).ready(function() {
$(".filter-button").click(function(e) {
var value = $(this).attr("data-filter");
if (value == "all") {
$(".filter").show("1000");
} else {
$(".filter").filter("." + value).show("3000");
$(".filter").not("." + value).hide("3000");
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
Is it doable to achieve this using javascript, css, and html? Or if you have a better suggestion, please share it with me.