How to move titles under lightbox images?

I am using the Hudson template. Could anyone tell me the CSS to use to make the image titles appear under the lightbox images that popup from a gallery grid?

Thanks.

This is a bit of a hack, but I think I may have got it working. I think it needs more testing to make sure text is viewable and not overlapping on all screen sizes. You can view it (and test it for me if you want, please) by clicking on the thumbnails here: http://gitanarosa.com/artist/#/whitney-oldenburg/.

You will probably need to adjust code based on the size of you images. Most of these are sized at 519x740.

This is the code I used, add it to the CSS Editor:

/* creates grey overlay without hover, makes text white, and pushes text below image */
.sqs-lightbox-meta {
 background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
 bottom: -80px !important;
 color: #000;
 max-width: 100% !important;
 opacity: 1 !important;
 padding: 10px !important;
}

.sqs-gallery-block-slideshow .meta-inside {
 padding: 5px 0;
 clear: both;
}

.sqs-gallery-block-slideshow .meta .meta-description p {
 padding-top: 0;
 margin-top: -3px;
 font-size: 11px;
 color: #000;
}

/* reduces size of images relative to browser window */
.yui3-lightbox2 .sqs-lightbox-slideshow .sqs-lightbox-padder {
 top: 10%;
 left: 15%;
 bottom: 15%;
 right: 15%;
}

/* reduces space between image and text based on different smaller screen sizes */

@media (max-width: 800px) {
 .sqs-lightbox-meta {
   bottom: -40px !important;
 }
}

@media (min-width: 603) and (max-width: 799px) {
 .sqs-lightbox-meta {
   bottom: -30px !important;
 }
}

@media (max-width: 602px) {
 .sqs-lightbox-meta {
   bottom: -10px !important;
 }
}

It didn't do anything. I deleted the text lines in the code...

Also, I'm trying to get a text to appear underneath each video... from a Gallery, from grid block. I have lightbox turned on after they click....but looking for a solution to get the Vimeo text metadata from titles to appear underneath each grid item.

Coral, nice website! Looks like you've refined this even more there since posting the above. You got hyperlinks to work in the captions, and your fonts look good at that small size. Is the latter just via Heading styles, or CSS code?

Do you know if there's any way to get the text to appear directly beneath each image, regardless of their size/dimensions?

Since you asked for testing:

On Mac (running Snow Leopard), it works in both Safari & Firefox browsers.

On iPhone 5 (running current iOS, 7.1.1), it works great: your gallery text in lightbox always appears at the bottom of the screen, with the image more or less filling the screen above it. Works whether holding the phone in portrait or landscape. Links work too.

Strangely, it doesn't work on an iPad 3 or 4 (current iOS, 7.1.1). When holding iPad in portrait mode, titles get partly cut off (and descriptions below don't appear). When holding it in landscape mode, no text appears at all.

How can I change the background to white and the text to gray? Same thing only flipped colors.I've been trying to do it myself, but I haven't been able to accomplish it yet.

Please and thank you

I used your code to add titles to my light box galleries. Works great so far! I had to do some tweaking of the numbers to get titles to work responsively on my devices, which I think I'm just about figured out.

What I can't find a solution for is having titles show up on videos in lightbox galleries. Videos have a different interface to set up are they not .meta descriptions?

Hi, I think I figured out a better way to move the titles/captions below the images. I heavily used the code written by @Coral above but I just wasn't happy using all the media queries.

I'm still testing this, but so far so good. Let me know if there are bugs or improvements. :) Oh, I'm using the Native template.

.sqs-lightbox-meta {
  background: none repeat scroll 0    0 rgba(0, 0, 0, 0.0) !important;
  max-width: 100% !important;
  color: #FFF;
  opacity: 1 !important;
  padding-left: 0px !important;
  margin-bottom: -60px !important;
}

/* adjusts lightbox text color */
.sqs-lightbox-meta p, .sqs-lightbox-meta h1 {
color: black !important;
}

/* reduces size of images relative to browser window */
.yui3-lightbox2 .sqs-lightbox-slideshow .sqs-lightbox-padder {
  top: 5%;
  bottom: 8%;
}

Update: This solution does not work on iphone/ipad. However it does work on very small browser windows on the computer. Does anyone know how Squarespace targets mobile devices? It seems to be something other than screen size.

Did you manage to do this in the end? If you did, would you mind sharing the code. I have been trying and failing, for some reason the hover function seems to mess it up. Thanks!

Did you manage to sort this out in the end? If you did, would you mind sharing the code? I have been trying and failing, for some reason the hover function seems to mess it up. Thanks!