Why is the gallery not hiding full images?

Question

I am creating a gallery of 14 images and just wondering why the large images are not hiding with overflow instead all are being shown (with 14 images its quite a bit of code). It was working originally but i tried to adapt the sizes as i have two different sized photos (640x480 and 480x640) Here's my code:

HTML

    <div id="gallery">
      <div id="full-picture">
        <div>
          <a name="picture1"></a>
          <img alt="1" src="Photos/Final/img 29.jpg" />
        </div>
        <div>
          <a name="picture2"></a>
          <img alt="2" src="Photos/Final/img 27.jpg" />
        </div>
        <div>
          <a name="picture3"></a>
          <img alt="3" src="Photos/Final/img 25.jpg" />
        </div>
        <div>
          <a name="picture4"></a>
          <img alt="4" src="Photos/Final/img 22.jpg" />
        </div>
        <div>
          <a name="picture5"></a>
          <img alt="4" src="Photos/Final/img 1.jpg" />
        </div>
        <div>
          <a name="picture6"></a>
          <img alt="4" src="Photos/Final/img 5.jpg" />
        </div>
        <div>
          <a name="picture7"></a>
          <img alt="4" src="Photos/Final/img 7.jpg" />
        </div>
        <div>
          <a name="picture8"></a>
          <img alt="4" src="Photos/Final/img 8.jpg" />
        </div>
        <div>
          <a name="picture9"></a>
          <img alt="4" src="Photos/Final/img 15.png" />
        </div>
        <div>
          <a name="picture10"></a>
          <img alt="4" src="Photos/Final/img 26.jpg" />
        </div>
        <div>
          <a name="picture11"></a>
          <img alt="4" src="Photos/Final/img 28.jpg" />
        </div>
        <div>
          <a name="picture12"></a>
          <img alt="4" src="Photos/Final/img 32.jpg" />
        </div>
        <div>
          <a name="picture13"></a>
          <img alt="4" src="Photos/Final/img 34.jpg" />
        </div>
        <div>
          <a name="picture14"></a>
          <img alt="4" src="Photos/Final/img 41.jpg" />
        </div>

     </div>

      <ul id="navigation">
        <li>
          <a href="#picture1">
          <img alt="1" src="Photos/Final/img 29.jpg" />
          </a>
        </li>
        <li>
          <a href="#picture2">
          <img alt="2" src="Photos/Final/img 27.jpg" />
          </a>
        </li>
        <li>
          <a href="#picture3">
          <img alt="3" src="/Photos/Final/img 25.jpg" />
          </a>
        </li>
        <li>
          <a href="#picture4">
          <img alt="4" src="Photos/Final/img 22.jpg" />
          </a>
        </li>
        <li>
          <a href="#picture5">
          <img alt="1" src="Photos/Final/img 1.jpg" />
          </a>
        </li>
        <li>
          <a href="#picture6">
          <img alt="1" src="Photos/Final/img 5.jpg" />
          </a>
        </li>
        <li>
          <a href="#picture7">
          <img alt="1" src="Photos/Final/img 7.jpg" />
          </a>
        </li>
        <li>
          <a href="#picture8">
          <img alt="1" src="Photos/Final/img 8.jpg" />
          </a>
        </li>
        <li>
          <a href="#picture9">
          <img alt="1" src="Photos/Final/img 15.png" />
          </a>
        </li>
        <li>
          <a href="#picture10">
          <img alt="1" src="Photos/Final/img 26.jpg" />
          </a>
        </li>
        <li>
          <a href="#picture11">
          <img alt="1" src="Photos/Final/img 28.jpg" />
          </a>
        </li>
        <li>
          <a href="#picture12">
          <img alt="1" src="Photos/Final/img 32.jpg" />
          </a>
        </li>
        <li>
          <a href="#picture13">
          <img alt="1" src="Photos/Final/img 34.jpg" />
          </a>
        </li>
        <li>
          <a href="#picture14">
          <img alt="1" src="Photos/Final/img 41.jpg" />
          </a>
        </li>
      </ul>
    </div>

CSS

#gallery {
    width: 100%;
    height: 55%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin: 20px auto;
  }

  #navigation {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    overflow: auto;
  }

  #navigation li {
    padding: 0;
    margin: 0;
    margin: 0;
  }
  #navigation li a img {
    display: block;
    border: none;
    width: 200px;
    height: 200px;
  }

  #navigation li a {
    display: block;
  }

  #full-picture {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
  }

  #full-picture img {
    width: auto;
    position: center;
    overflow: hidden;
  }

Answer 1

To answer your question, I had to cut your original code to pieces as it contained a few too many html/css/logic errors and redundant code. Sorry for that!

However, from your code I assume you want a scrolling thumbnail-bar at the bottom of the page and show a larger image when a thumbnail is clicked, nicely centered in view.

To help you out I created a demo using images from 'Lorem Picsum'. I have heavily commented the CSS where applicable.

Basic structure:

• split the gallery in 3 flexbox rows: header, pictures and navigation
• hide ALL 'large' images by default #full-picture a { display: none }
• only show a 'large' image when the appropriate thumbnail is selected (clicked) by using the CSS :target selector w3schools - CSS :target Selector like this: #full-picture :target { display: initial }. This is actually the relevant code that does all the work, the rest of the CSS is used to make things look nice.

Walk through the CSS to understand what's going on.

Resize the browser to see that there is even some 'responsive' sizing going on.

Let me know if you need me to explain some more....

The Snippet:

html, body  { margin: 0; height: 100%; width: 100% } /* to fill full viewport */
header      { padding: 2rem; text-align: center }    /* some layout stuff */

#gallery, #pictures, #navigation {
    display: flex;              /* all are flexbox containers */
    width: 100%;                /* fill parent width */
}
#gallery {
    flex-direction: column;     /* a column of 3 rows: header, #pictures and #navigation */
    align-items: space-between; /* pushes rows apart */
    height: 100%;               /* fill available vertical space */
}
#pictures {
    justify-content: center;    /* center the displayed image in view */
    align-items: center;

    flex-grow: 1;               /* allow element to grow (default = 0) */
         /* actually: make #pictures fill all available vertical space */
}
#full-picture img {
    width: 100%;                /* stretch to maximum (height = auto) */
    max-width : 640px;          /* just to constraint to OPs values   */
    max-height: 640px;
}
/*
    The below two rules do the trick:
    hide all 'big' pictures and only show the one that is clicked (:target)
    
    The rest of the CSS in this <style> is actually just eye-candy
    to make things look nice. So, focus your attention to understanding
    the <a> tag and its :target !!
    
    w3schools - CSS :target Selector (https://www.w3schools.com/cssref/sel_target.asp) 
*/
#full-picture a {
    display: none               /* hide all big pictures by default */
}
#full-picture :target {
    display: initial            /* which is 'block' and show */
}                               /* targeted image when thumb is clicked */

#navigation { overflow: auto; min-height: 220px } /* 200px + some scrollbar height */
/* flex-grow = 0, it cannot grow, so it WILL overflow when browser is too narrow   */
/* shows scrollbar when more thumbs available than it can display on screen        */

#navigation img {
    object-fit: cover; /* change to 'contain' to show thumb with actual ratio   */
    height: 200px;     /* either show equally sized thumbs, or use these values */
    width : 200px;     /* as constraint with 'contain' */
}

<div id="gallery">
    <header>
        <p>moved #full-picture <b>&lt;img&gt;</b>ages inside <b>&lt;a&gt;</b>nchors</p>
        <p>simplified the HTML and removed <b>&lt;div&gt;</b> and <b>&lt;ul&gt;&lt;li&gt;</b> around <b>&lt;a&gt;</b>nchors</p>
    </header>

    <div id="pictures">
        <div id="full-picture">
            <a id="picture1" ><img alt=" 1" src="https://picsum.photos/1280/960?random=1"></a>
            <a id="picture2" ><img alt=" 2" src="https://picsum.photos/640/480?random=2" ></a>
            <a id="picture3" ><img alt=" 3" src="https://picsum.photos/640/480?random=3" ></a>
            <a id="picture4" ><img alt=" 4" src="https://picsum.photos/480/640?random=4" ></a>
            <a id="picture5" ><img alt=" 5" src="https://picsum.photos/640/480?random=5" ></a>
            <a id="picture6" ><img alt=" 6" src="https://picsum.photos/640/480?random=6" ></a>
            <a id="picture7" ><img alt=" 7" src="https://picsum.photos/480/640?random=7" ></a>
            <a id="picture8" ><img alt=" 8" src="https://picsum.photos/640/480?random=8" ></a>
            <a id="picture9" ><img alt=" 9" src="https://picsum.photos/640/480?random=9" ></a>
            <a id="picture10"><img alt="10" src="https://picsum.photos/640/480?random=10"></a>
            <a id="picture11"><img alt="11" src="https://picsum.photos/480/640?random=11"></a>
            <a id="picture12"><img alt="12" src="https://picsum.photos/640/480?random=12"></a>
            <a id="picture13"><img alt="13" src="https://picsum.photos/480/640?random=13"></a>
            <a id="picture14"><img alt="14" src="https://picsum.photos/640/480?random=14"></a>
        </div>
    </div>

    <div id="navigation">
        <a href="#picture1" ><img alt=" 1" src="https://picsum.photos/1280/960?random=1"></a>
        <a href="#picture2" ><img alt=" 2" src="https://picsum.photos/640/480?random=2" ></a>
        <a href="#picture3" ><img alt=" 3" src="https://picsum.photos/640/480?random=3" ></a>
        <a href="#picture4" ><img alt=" 4" src="https://picsum.photos/480/640?random=4" ></a>
        <a href="#picture5" ><img alt=" 5" src="https://picsum.photos/640/480?random=5" ></a>
        <a href="#picture6" ><img alt=" 6" src="https://picsum.photos/640/480?random=6" ></a>
        <a href="#picture7" ><img alt=" 7" src="https://picsum.photos/480/640?random=7" ></a>
        <a href="#picture8" ><img alt=" 8" src="https://picsum.photos/640/480?random=8" ></a>
        <a href="#picture9" ><img alt=" 9" src="https://picsum.photos/640/480?random=9" ></a>
        <a href="#picture10"><img alt="10" src="https://picsum.photos/640/480?random=10"></a>
        <a href="#picture11"><img alt="11" src="https://picsum.photos/480/640?random=11"></a>
        <a href="#picture12"><img alt="12" src="https://picsum.photos/640/480?random=12"></a>
        <a href="#picture13"><img alt="13" src="https://picsum.photos/480/640?random=13"></a>
        <a href="#picture14"><img alt="14" src="https://picsum.photos/640/480?random=14"></a>
    </div>
</div>