LIGHTBOX CAPTION ONLY

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!

1 hour ago, Sugar said:

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;
}