Portfolio con filtri

<h2>PORTFOLIO</h2>
<div id="myBtnContainer">
 <button class="btn active" onclick="filterSelection('all')"> Mostra tutto</button>
 <button class="btn" onclick="filterSelection('nature')"> Natura</button>
 <button class="btn" onclick="filterSelection('cars')"> Macchine</button>
 <button class="btn" onclick="filterSelection('people')"> Gente</button>
</div>


<!-- Portfolio Gallery Grid -->
<div class="row">
 <div class="column nature">
 <div class="content">
 <img src="https://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/mountains.jpg" alt="Mountains" style="width:100%">
 <h4>Montagne</h4>
 <p>Il mio testo..</p>
 </div>
 </div>
 <div class="column nature">
 <div class="content">
 <img src="https://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/lights.jpg" alt="Lights" style="width:100%">
 <h4>Luci</h4>
 <p>Il mio testo..</p>
 </div>
 </div>
 <div class="column nature">
 <div class="content">
 <img src="https://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/nature.jpg" alt="Nature" style="width:100%">
 <h4>Foresta</h4>
 <p>Il mio testo..</p>
 </div>
 </div>

<div class="column cars">
 <div class="content">
 <img src="https://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/cars1.jpg" alt="Car" style="width:100%">
 <h4>Antica</h4>
 <p>Il mio testo..</p>
 </div>
 </div>
 <div class="column cars">
 <div class="content">
 <img src="https://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/cars2.jpg" alt="Car" style="width:100%">
 <h4>Veloce</h4>
 <p>Il mio testo..</p>
 </div>
 </div>
 <div class="column cars">
 <div class="content">
 <img src="http://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/cars3.jpg" alt="Car" style="width:100%">
 <h4>Classica</h4>
 <p>Il mio testo..</p>
 </div>
 </div>

<div class="column people">
 <div class="content">
 <img src="https://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/people1.jpg" alt="People" style="width:100%">
 <h4>Ragazza</h4>
 <p>Il mio testo..</p>
 </div>
 </div>
 <div class="column people">
 <div class="content">
 <img src="https://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/people2.jpg" alt="People" style="width:100%">
 <h4>Uomo</h4>
 <p>Il mio testo..</p>
 </div>
 </div>
 <div class="column people">
 <div class="content">
 <img src="https://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/people3.jpg" alt="People" style="width:100%">
 <h4>Donna</h4>
 <p>Il mio testo..</p>
 </div>
 </div>
<!-- END GRID -->
</div>

/* Center website */
.main {
 max-width: 1000px;
 margin: auto;
}


h1 {
 font-size: 50px;
 word-break: break-all;
}

.row {
 margin: 8px -16px;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
 padding: 8px;
}

/* Create three equal columns that floats next to each other /
.column {
 float: left;
 width: 33.33%;
 display: none; / Hide columns by default */
}

/* Clear floats after rows */
.row:after {
 content: "";
 display: table;
 clear: both;
}

/* Content */
.content {
 background-color: white;
 padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
 display: block;
}

/* Style the buttons */
.btn {
 border: none;
 outline: none;
 padding: 12px 16px;
 background-color: white;
 cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btn:hover {
 background-color: #ddd;
}

/* Add a dark background color to the active button */
.btn.active {
 background-color: #666;
 color: white;
}

<script>
filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
 var x, i;
 x = document.getElementsByClassName("column");
 if (c == "all") c = "";
 // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
 for (i = 0; i < x.length; i++) {
 w3RemoveClass(x[i], "show");
 if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
 }
}


// Show filtered elements
function w3AddClass(element, name) {
 var i, arr1, arr2;
 arr1 = element.className.split(" ");
 arr2 = name.split(" ");
 for (i = 0; i < arr2.length; i++) {
 if (arr1.indexOf(arr2[i]) == -1) {
 element.className += " " + arr2[i];
 }
 }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
 var i, arr1, arr2;
 arr1 = element.className.split(" ");
 arr2 = name.split(" ");
 for (i = 0; i < arr2.length; i++) {
 while (arr1.indexOf(arr2[i]) > -1) {
 arr1.splice(arr1.indexOf(arr2[i]), 1);
 }
 }
 element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
 btns[i].addEventListener("click", function(){
 var current = document.getElementsByClassName("active");
 current[0].className = current[0].className.replace(" active", "");
 this.className += " active";
 });
}
</script>