CSS or similar to add Captions to POPPED images from lightbox

This is a popup image from the listed site. How is it possible to get captions visible as rollover on the pop up and not visible in the gallery mode, any tips where to begin? thanks

Hi,

Can you share link to that page? We can check easier

Quote

Link to page:https://www.clairebaily.com/one

Then open first/any image.

Thanks if you have any time to look deeper.

I can see they are using wrapper which I confess I do not know but I get the sense that items are nested/wrapped, the caption and dark fill are constrained within the image width and centred left. Any breakdown of this code would be amazingly helpful. Thanks

I am trying to create something like this:

https://ferret-goose-4blj.squarespace.com/who?itemId=636j7v8uocztmw2hzphhqbervyk40o-w656e-xm5j7

On 10/21/2023 at 10:31 AM, tuanphan said:

Hi,

Can you share link to that page? We can check easier

Hi, I am using this code with success in custom, with a bit of tinkering:

.sqs-lightbox-slide{

 background: rgba(255, 255, 255, 1)
}
/* Lightbox opacity */
.gallery-lightbox-background {
    opacity: 1.0;
}
.gallery-lightbox-item img { 
  flex-basis: 50%;
  padding:1px;
  box-sizing: border-box;
  display: inline !important;
  border-radius: 2px;
  border: 0px solid #000;
  width: unset !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
 background-color: grey;
 z-index: -1;
}

To enable a border/box around the image in the lightbox. Is there any means to get .gallery-lightbox-item img to also control the position of the caption text and to create a dark box/bg that will also flex? Similar to image attached. Below is what  I get now and 2nd image is what I am working towards.