gallery-single-thumbnail.css

/**
 * Display a Gallery with only one thumbnail
 * Show other Gallery Items after clicked on the thumbnail
 * =======================================================
 * Works good togheter with so called "Lightbox Plugins" that let the user navigate trough gallery images inside the lightbox
 * Example: https://wordpress.org/plugins/responsive-lightbox/
 * only hides all but the first image in content and let the rest accessible via the lightbox.
 * 
 * testet with "classic editor" galleries.
 * Gutenberg serves extra Frontend CSS which i just cant stand to interfer with mine.
 *
 * Edit the text "Galerie öffnen" to your language
 * EN: "open gallery"
 */

/* remove before speudo element just in case it exists. it then would be the first-child */
.gallery::before{
  display:none;
}
/* hide all gallery-items */
.gallery > .gallery-item{
  display:none;
}
/* show the first gallery-item */
.gallery > .gallery-item:first-child{
  display:block;
}
/* optional: display a "open gallery" hint. May needs other css depending on your theme */
.gallery > .gallery-item:first-child a::after{
  content:'Galerie öffnen';
  display:block;
  margin:0 auto;
}
.gallery-size-thumbnail > .gallery-item:first-child a::after{
  width:150px;
}