Gallery Block Custom Thumbnails

Site URL: http://www.differentkennedy.com

While I'm aware of squarespace's inherent gallery block customization features, I'm not seeing an option to customize the thumbnail display of items in a gallery block. My goal would be to have a gallery block of thumbnails [bottom right in the attached image -- trying to set up a template I can copy for "sub galleries" within an index gallery] but have them display as numbers but still click through to that respective image and a lightbox display of the gallery. 

My initial thought was to have this as two seperate images, one the "thumbnail" of the number, and one the intended image; however, I'm not seeing an option for dictating the thumbnail, or even a custom thumb display if I were to include the number within the lightbox image. 

Looking for solutions that could achieve this effect, whether it be through CSS, different blocking etc. if this is possible. Any help would be much appreciated! 

differentkennedy

I wonder if this is what you are after: 

@bangank36  This looks to be what I'm hopping to achieve - can you explain a bit the solution so I can duplicate on all items? Are you just overlaying a designated title or are you inserting an image that is then clicking through to the lightbox? Or is it possible to drop in your css for me to copy paste and I can work backwards from there? Thanks so much! 

12 minutes ago, differentkennedy said:

@bangank36  This looks to be what I'm hopping to achieve - can you explain a bit the solution so I can duplicate on all items? Are you just overlaying a designated title or are you inserting an image that is then clicking through to the lightbox? Or is it possible to drop in your css for me to copy paste and I can work backwards from there? Thanks so much! 

sure let me send you

Here we go, paste this Design->Custom CSS

#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid {
  /* Set "design-grid-counter" to 0 */
  counter-reset: design-grid-counter;
}
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a::after {
  background: #9E9E9E;
  z-index: 998;
  content: " ";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  transition: opacity 0.75s;
}
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a::before {
  /* Increase "design-grid-counter" by 1 */
  counter-increment: design-grid-counter;
  content: "0" counter(design-grid-counter);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   
  background: #9E9E9E;
  z-index: 999;
  color: #fff;
  font-size: 3em;
  transition: opacity 0.75s;
}
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a:hover::before,
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a:hover::after {
  opacity: 0;
  cursor: pointer;
  z-index: -999;
}

@bangank36 Awesome this works but it looks like the gallery no longer opens lightbox options?  Additional question -- is there a way to make the numbers uniformly display as two digits? IE: 01, 02, 03 etc. ? 

Tried manipulating the counter but that doesn't seem to do it. Thank you for all your help on this!! 

3 hours ago, differentkennedy said:

@bangank36 Awesome this works but it looks like the gallery no longer opens lightbox options?  Additional question -- is there a way to make the numbers uniformly display as two digits? IE: 01, 02, 03 etc. ? 

Tried manipulating the counter but that doesn't seem to do it. Thank you for all your help on this!! 

Noticed the issue, will update

3 hours ago, differentkennedy said:

@bangank36 Awesome this works but it looks like the gallery no longer opens lightbox options?  Additional question -- is there a way to make the numbers uniformly display as two digits? IE: 01, 02, 03 etc. ? 

Tried manipulating the counter but that doesn't seem to do it. Thank you for all your help on this!! 

I just update the accepted answer content, pls have a look

@bangank36  Still no lightbox unfortunately. 

6 minutes ago, differentkennedy said:

@bangank36  Still no lightbox unfortunately. 

#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid {
  /* Set "design-grid-counter" to 0 */
  counter-reset: design-grid-counter;
}
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a::after {
  background: #9E9E9E;
  z-index: 998;
  content: " ";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  transition: opacity 0.75s;
}
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a::before {
  /* Increase "design-grid-counter" by 1 */
  counter-increment: design-grid-counter;
  content: "0" counter(design-grid-counter);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   
  background: #9E9E9E;
  z-index: 999;
  color: #fff;
  font-size: 3em;
  transition: opacity 0.75s;
}
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a:hover::before,
#collection-569ec63989a60ac11efdeb9c .sqs-gallery-design-grid .sqs-gallery-design-grid-slide a:hover::after {
  opacity: 0;
  cursor: pointer;
  z-index: -999;
}

My bad, pls take this http://recordit.co/Ywd7XDS9EX

@bangank36 That last one did it! Bumped to best answer - thanks so much for working with me on that! Appreciate it!