Salve a tutti ragazzi
Per prima cosa, ne approfitto per ringraziare in anticipo tutti coloro che mi aiuteranno nella risoluzione del mio problema.
Sto creando un sito web aziendale e nella Home Page, ho inserito tutta una serie di foto (i video li devo ancora inserire) creando una sorta di "Gallery Dinamica" composta dalle sezioni "MOSTRA TUTTI", "FOTO" e "VIDEO". Il mio problema è che queste immagini rimangono sempre visibili nella Home, io vorrei, invece, "determinarne la visualizzazione" rendendole "invisibili" e facendole visualizzare solo nel momento in cui si clicca sulle voci "MOSTRA TUTTI", "FOTO" e "VIDEO" appunto; rendendo, così la Home più gradevole dal punto di vista visivo e maggiormente dinamica.
Potreste consigliarmi come fare?
So che la mia, potrebbe risultare una domanda "stupida" ma mi sto da poco avvicinando al mondo della programmazione, per cui, sono ancora un vero e proprio neofita.
Spero di essere riuscito a spiegarmi chiaramente e spero anche, di aver postato la mia richiesta nella giusta sezione del forum. Vi inserisco qui un pezzo di codice html in modo tale da farvi vedere concretamente il mio problema e ciò che ho fatto finora.
Saluti
Ale


codice HTML:
<head><meta charset="utf-8"><title>Documento senza titolo</title><link href="file:///C|/Users/Siciliacque/Desktop/Nuova cartella/WEB frost/WEB frost/template/frost/style.css" rel="stylesheet" type="text/css">
  <body>  <div id="gallery" class="section anchor">    <div class="dark-wrapper">      <div class="container inner">        <h2 class="section-title text-center">Gallery</h2>        <div class="grid-portfolio fix-portfolio">          <ul class="filter">             <li><a class="active" href="" data-filter="*">Mostra Tutti</a></li>            <li><a href="#" data-filter=".foto">Foto</a></li>            <li><a href="#" data-filter=".video">Video</a></li>          </ul>                    <!-- /filter -->                    <ul class="content-slider items">                        <li class="item thumb video">              <figure><a href="#" data-contenturl="portfolio-post7.html" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw">                <div class="text-overlay">                  <div class="info">Visualizza Video</div>                </div>                <img src="style/images/gallery/p7.jpg" alt="" /> </a></figure>            </li>            <li class="item thumb foto">              <figure><a               href="portfolio-post.html" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw">                <div class="text-overlay">                  <div class="info">Ingrandisci</div>                </div>                <img src="style/images/gallery/p1.jpg" alt="" /> </a></figure>            </li>            <li class="item thumb foto">              <figure><a href="portfolio-post.html" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw">                <div class="text-overlay">                  <div class="info">Ingrandisci</div>                </div>                <img src="style/images/gallery/p2.jpg" alt="" /> </a></figure>            </li>            <li class="item thumb foto">              <figure><a href="#" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw">                <div class="text-overlay">                  <div class="info">Ingrandisci</div>                </div>                <img src="style/images/gallery/p3.jpg" alt="" /> </a></figure>            </li>            <li class="item thumb foto">              <figure><a href="#" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw">                <div class="text-overlay">                  <div class="info">Ingrandisci</div>                </div>                <img src="style/images/gallery/p4.jpg" alt="" /> </a></figure>            </li>            <li class="item thumb foto">              <figure><a href="#" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw">                <div class="text-overlay">                  <div class="info">Ingrandisci</div>                </div>                <img src="style/images/gallery/p5.jpg" alt="" /> </a></figure>            </li>            <li class="item thumb foto">              <figure><a href="#" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw">                <div class="text-overlay">                  <div class="info">Ingrandisci</div>                </div>                <img src="style/images/gallery/p6.jpg" alt="" /> </a></figure>            </li>            <li class="item thumb foto">              <figure><a href="#" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw">                <div class="text-overlay">                  <div class="info">Ingrandisci</div>                </div>                <img src="style/images/gallery/p8.jpg" alt="" /> </a></figure>            </li>            <li class="item thumb foto">              <figure><a href="#" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw">                <div class="text-overlay">                  <div class="info">Ingrandisci</div>                </div>                <img src="style/images/gallery/p9.jpg" alt="" /> </a></figure>            </li>  <li class="item thumb foto">              <figure><a href="#" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw">                <div class="text-overlay">                  <div class="info">Ingrandisci</div>                </div>                <img src="style/images/gallery/p10.jpg" alt="" /> </a></figure>            </li>            <li class="item thumb foto"><a href="#" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw"><img src="style/images/gallery/p11.jpg" alt="" /></a>              <figure><a href="#" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw">              <div class="text-overlay">                  <div class="info">Ingrandisci</div>                </div>              </a></figure>            </li>            <li class="item thumb foto">              <figure><a href="#" data-contenturl="portfolio-post.html" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw">                <div class="text-overlay">                  <div class="info">Ingrandisci</div>                </div></body>