Jump to content

CSS or similar to add Captions to POPPED images from lightbox

Recommended Posts

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


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:


 background: rgba(255, 255, 255, 1)
/* Lightbox opacity */
.gallery-lightbox-background {
    opacity: 1.0;
.gallery-lightbox-item img { 
  flex-basis: 50%;
  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.Current.thumb.jpg.25a57ae3aef037ad80042d3357f7a1f9.jpgpopupexample.thumb.jpg.13a09df1773a4c1a99645232e3b2bf7f.jpg


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.