Sugar

This is for 7.1
I found a code for my portfolio gallery that offers a nice alternative to have the caption pop-up at the bottom of the image as hover/overlap with a nice transparent background. The caption only pops-up when the mouse is over the image and no longer appears below the image.
I am using the Grid:strip gallery, and it lets my portfolio images keep their shape while not having to sacrifice the title of my work.
However that being said, I still have not found a successful code to have my caption show up below my image in the Lightbox.
 
In case anyone is curious about the gallery caption hover, I used her code and she included images: https://beatrizcaraballo.com/blog/simple-hover-gallery-strips-7-1 
I made two changes her code because I did not like how much area her overlay covered or her font used. To make the overlay cover less simply change padding size (she originally used padding: 20px 50px, I prefer the padding: 2px 2px)
As for the font, I simply removed her font & size by leaving this blank which will leave the font to customise with my page font themes - this what I used:
font-family: '';
  font-size: ;
  font-weight: ;
  text-transform: ;
She originally had (in case you want to customise):
font-family: 'Lato';
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
Add the code below to Design >> Custom CSS >> (not the header or footer)
If there is custom CSS in there already just add this code below that one
/*CREATING A SIMPLE HOVER MODE FOR GALLERY STRIPS IN 7.1*/ .gallery-caption-grid-strips {   background-color: rgba(255, 255, 255, 0.7);   box-sizing: border-box;   padding: 2px 2px;   max-width: 100%;   pointer-events: none;   position: absolute;   bottom: 0;   text-align: center;   transform: translateY(100%);   transition: transform .3s; } .gallery-section .gallery-caption.gallery-caption-grid-strips p {   font-family: '';   font-size: ;   font-weight: ;   text-transform: ; } .gallery-strips-item {   overflow: hidden; } .gallery-strips-item:hover .gallery-caption-grid-strips {   transform: none; }

Site URL: https://sugarofoz.squarespace.com/portfolio/page1
This is such a common issue but I can not seem to resolve it
In my portfolio, I only want the caption to show up below the image in Lightbox only. I do not want any captions below the image in the gallery (I am using Grid:strip). I link the first page of my portfolio and you can see the captions show below the image. I only have selected images with captions, not all.
So far every code I have tried has not worked, please help!

This is for 7.1
I found a code for my portfolio gallery that offers a nice alternative to have the caption pop-up at the bottom of the image as hover/overlap with a nice transparent background. The caption only pops-up when the mouse is over the image and no longer appears below the image.
I am using the Grid:strip gallery, and it lets my portfolio images keep their shape while not having to sacrifice the title of my work.
However that being said, I still have not found a successful code to have my caption show up below my image in the Lightbox.
 
In case anyone is curious about the gallery caption hover, I used her code and she included images: https://beatrizcaraballo.com/blog/simple-hover-gallery-strips-7-1 
I made two changes her code because I did not like how much area her overlay covered or her font used. To make the overlay cover less simply change padding size (she originally used padding: 20px 50px, I prefer the padding: 2px 2px)
As for the font, I simply removed her font & size by leaving this blank which will leave the font to customise with my page font themes - this what I used:
font-family: '';
  font-size: ;
  font-weight: ;
  text-transform: ;
She originally had (in case you want to customise):
font-family: 'Lato';
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
Add the code below to Design >> Custom CSS >> (not the header or footer)
If there is custom CSS in there already just add this code below that one
/*CREATING A SIMPLE HOVER MODE FOR GALLERY STRIPS IN 7.1*/ .gallery-caption-grid-strips {   background-color: rgba(255, 255, 255, 0.7);   box-sizing: border-box;   padding: 2px 2px;   max-width: 100%;   pointer-events: none;   position: absolute;   bottom: 0;   text-align: center;   transform: translateY(100%);   transition: transform .3s; } .gallery-section .gallery-caption.gallery-caption-grid-strips p {   font-family: '';   font-size: ;   font-weight: ;   text-transform: ; } .gallery-strips-item {   overflow: hidden; } .gallery-strips-item:hover .gallery-caption-grid-strips {   transform: none; }