how to remove white-space of hidden images for a category filter

Question

I just did a category filter thing which consist to hide the images that I don't need, so if I click on the car logo at the top I will need to hide every element that doesn't contain "car" id, but the problem is that for some reason it keeps the hidden images dimensions.

for example:

css code:

.block_container{
    flex-wrap: wrap;
    width: 632px;
    height: 350px;
    overflow-y: scroll;
    background-color: rgba(201, 201, 201, 0.5); 
    border-radius: 10px;
    box-sizing: border-box;
    display: block;
}
.game_item{
    margin: 13px;
    width: 176px;
    height: 100px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-sizing: border-box;
    float: left;
    transition: all 0.4s ease-in-out;
}
.hide{
    transform: scale(0);
    width: 0;
    height: 0;
    padding: 0;
    transition: all 0.4s ease-in-out;
}

JavaScript code:

$(document).ready(function(){
    $('.category_item').click(function(){
        var category=$(this).attr('id');

        if(category=='all'){
            $('.game_item').addClass('hide');
            setTimeout(function(){
                $('.game_item').removeClass('hide');
            }, 300);
        } else{
            $('.game_item').addClass('hide');
            setTimeout(function(){
                $('.'+category).removeClass('hide');
            }, 300);
        }
    });
});

Answer 1

I think you just forgot the margin. When you set it to 0 for the class " .hide " it should work as desired.

Working example:

 $(document).ready(function(){ $('.category_item').click(function(){ var category=$(this).attr('id'); if(category=='all'){ $('.game_item').addClass('hide'); setTimeout(function(){ $('.game_item').removeClass('hide'); }, 300); } else{ $('.game_item').addClass('hide'); setTimeout(function(){ $('.'+category).removeClass('hide'); }, 300); } }); });

 .block_container { flex-wrap: wrap; width: 632px; height: 350px; overflow-y: scroll; background-color: rgba(201, 201, 201, 0.5); border-radius: 10px; box-sizing: border-box; display: block; }.game_item { margin: 13px; width: 176px; height: 100px; border-top-left-radius: 10px; border-top-right-radius: 10px; box-sizing: border-box; float: left; transition: all 0.4s ease-in-out; }.hide { transform: scale(0); width: 0; height: 0; padding: 0; margin: 0; transition: all 0.4s ease-in-out; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button id="all" class="category_item" type="button">all</button> <button id="car" class="category_item" type="button">car</button> <button id="house" class="category_item" type="button">house</button> <button id="puzzle" class="category_item" type="button">puzzle</button> </div> <div class="block_container"> <img src="https://picsum.photos/id/234/200/300" class="game_item puzzle" /> <img src="https://picsum.photos/id/235/200/300" class="game_item puzzle" /> <img src="https://picsum.photos/id/236/200/300" class="game_item house" /> <img src="https://picsum.photos/id/237/200/300" class="game_item car" /> <img src="https://picsum.photos/id/238/200/300" class="game_item car" /> <img src="https://picsum.photos/id/239/200/300" class="game_item house" /> </div>

---

By the way, i think that manipulating width, height, transform, etc. could be to much and it would be enough to just set opacity: 0; and display: none; (with jQuery hide() )

Working example:

 $(document).ready(function(){ $('.category_item').click(function(){ var category=$(this).attr('id'); if(category=='all'){ $('.game_item').addClass('hide'); setTimeout(function(){ $('.game_item').show().removeClass('hide'); }, 300); } else{ $('.game_item').addClass('hide'); setTimeout(function(){ $('.game_item').hide(); $('.'+category).show().removeClass('hide'); }, 300); } }); });

 .block_container { flex-wrap: wrap; width: 632px; height: 350px; overflow-y: scroll; background-color: rgba(201, 201, 201, 0.5); border-radius: 10px; box-sizing: border-box; display: block; }.game_item { margin: 13px; width: 176px; height: 100px; border-top-left-radius: 10px; border-top-right-radius: 10px; box-sizing: border-box; float: left; transition: opacity 0.4s ease-in-out; }.hide { opacity: 0; transition: opacity 0.4s ease-in-out; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button id="all" class="category_item" type="button">all</button> <button id="car" class="category_item" type="button">car</button> <button id="house" class="category_item" type="button">house</button> <button id="puzzle" class="category_item" type="button">puzzle</button> </div> <div class="block_container"> <img src="https://picsum.photos/id/234/200/300" class="game_item puzzle" /> <img src="https://picsum.photos/id/235/200/300" class="game_item puzzle" /> <img src="https://picsum.photos/id/236/200/300" class="game_item house" /> <img src="https://picsum.photos/id/237/200/300" class="game_item car" /> <img src="https://picsum.photos/id/238/200/300" class="game_item car" /> <img src="https://picsum.photos/id/239/200/300" class="game_item house" /> </div>