title: How do I show a figcaption in a thumbnail gallery using JavaScript?
body: <p>I made a thumbnail gallery with JS, and I am trying to show the current image's figcaption when a thumbnail is clicked. JS is working fine for retrieving and showing the thumbnails themselves, but I'm stumped on how to display their figcaptions along with it. (Thumbnail figcaptions are currently set to 'display: none'). <br><br>
  Is a way to do this with CSS alone, or is a job for JS? Thanks in advance!</p>
  <p><a href="https://codepen.io/colinjalbert/pen/OJMBOMg" rel="nofollow noreferrer">https://codepen.io/colinjalbert/pen/OJMBOMg</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let current = document.querySelector("#current");
  
  let photos = document.getElementsByClassName("thumb");
  
  for (let i = 0; i &lt; photos.length; i++) {
    photos[i].addEventListener("click", display);
  }
  
  function display() {
    let prev = this.getAttribute("src");
    current.setAttribute("src", prev);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  
  body {
    font-family: sans-serif;
    margin-bottom: 4em;
    background-color: #1c1c1c;
  }
  
  figure {
    margin: 0px;
    text-align: center;
    float: right;
  }
  
  figcaption {
    position: relative;
    float: center;
    font-family: "Raleway";
    font-size: 1em;
    font-weight: 400;
    text-align: left;
    top: -35px;
    padding: 0.5em;
    color: #f9f9f9;
    background-color: black;
    opacity: 0.8;
  }
  
  .gallery-container {
    display: flex;
    margin: 2em 2em;
    background-color: transparent;
  }
  
  .gallery {
    display: flex;
    margin-top: -5px;
    width: 50%;
    height: auto;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
  }
  
  .gallery-item {
    display: flex;
    width: 10em;
    height: 10em;
    margin: 8px;
    overflow: hidden;
    border-radius: 5px;
  }
  
  .gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transform: scale(1.2);
    transition: transform 400ms ease-out;
    -webkit-transition: transform 400ms ease-out;
    -moz-transition: transform 400ms ease-out;
  }
  
  .gallery-item img:hover {
    transform: scale(1.18);
    -webkit-transform: scale(1.18);
    cursor: pointer;
  }
  
  .preview-container {
    display: block;
    width: 50%;
    height: auto;
    margin-left: 1em;
  }
  
  .preview {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .thumbcaption {
    display: none;
  }
  
  #current {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px;
  }
  
  #caption {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
    &lt;div class="gallery-container"&gt;
  
      &lt;div class="gallery"&gt;
  
        &lt;div class="gallery-item"&gt;
          &lt;img src="http://seymourchwastarchive.com/wp-content/uploads/2015/03/Chwast_PPG81_001d-1600x1073.jpg" alt="" class="thumb"&gt;
          &lt;figcaption class="thumbcaption"&gt;Blue (1979)&lt;/figcaption&gt;
        &lt;/div&gt;
  
        &lt;div class="gallery-item"&gt;
          &lt;img src="http://seymourchwastarchive.com/wp-content/uploads/2015/03/Chwast_Monkey_001_SOI85-1230x1600.jpg" alt="" class="thumb"&gt;
          &lt;figcaption class="thumbcaption"&gt;No Evil (2003)&lt;/figcaption&gt;
        &lt;/div&gt;
  
        &lt;div class="gallery-item"&gt;
          &lt;img src="http://seymourchwastarchive.com/wp-content/uploads/2014/12/Chwast_FAG_008-1287x1600.jpg" alt="" class="thumb"&gt;
          &lt;figcaption class="thumbcaption"&gt;Self Portrait (1980s)&lt;/figcaption&gt;
        &lt;/div&gt;
  
        &lt;div class="gallery-item"&gt;
          &lt;img src="http://seymourchwastarchive.com/wp-content/uploads/2014/12/Chwast_Fader_001.jpg" alt="" class="thumb"&gt;
          &lt;figcaption class="thumbcaption"&gt;The Notorious B.I.G. (2011)&lt;/figcaption&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="preview-container"&gt;
        &lt;figure class="preview"&gt;
          &lt;img src="http://seymourchwastarchive.com/wp-content/uploads/2015/03/Chwast_Monkey_001_SOI85-1230x1600.jpg" alt="" id="current"&gt;
  
          &lt;figcaption id="previewcaption"&gt;No Evil (2003)&lt;/figcaption&gt;
  
        &lt;/figure&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>