Jump to content

Captions and opacity

Recommended Posts

Hi everyone,

I recently improved my website by adding some code to make the captions only visible below the Lightbox, and therefore invisible on the page layout.

It is working, but it's also ugly. The typo doesn't work, it doesn't look nice and for some reasons, the caption box doesn't automaticaly align with the pictures it refers to, resulting in this ugly white box. First is how it is at the moment, and then what I imagine it could look like. Layout.thumb.jpg.03f17870f4dc7d8c7f5890f31e4e2964.jpg313744658_Testlayout.thumb.jpg.00a00cef2ab83ddd042761cc9b4cc44b.jpg

I am looking for ways to make the caption automaticaly adjust to the width of the pictures of each page, my pictures are not always 2,4x1. And I would also like to adjust the opacity of the background, which I knew how to do before adding my ligns of code. I'm not sure where to change that given I have this in the CSS

 

body {
  width: 100%;
}
section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
  position: relative;
}
.gallery-item-description {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: black;
}
.gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow {
  .gallery-item-description {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2% 6%;
    box-sizing: border-box;
  }
}
.gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel {
  .gallery-item-description {
    padding: 10px 25px;
    opacity: 1;
    transition: opacity 0.2s;
  }
  .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] {
    .gallery-item-description {
      opacity: 0;
    }
  }
}
.gallery-slideshow {
  .gallery-slideshow-list {
    position: static;
  }
  .gallery-slideshow-item-wrapper, .gallery-item-description {
    flex: 1 1 auto;
  }
}
.gallery-reel {
  .gallery-item-description {
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
  }
  &[data-width="inset"], &[data-width="inset"] {
    .gallery-item-description {
      max-width: 88vw;
    }
  }
  &[data-width="full-bleed"] {
    .gallery-item-description {
      max-width: 100vw;
    }
  }
}
.gallery-lightbox .gallery-item-description {
  margin-top: 1em;
  padding: 1em 2em;
  background-color: rgba(225, 225, 225, 1);
  transition: opacity 0.1s ease-out;
}
.gallery-lightbox-item[data-in=false] .gallery-item-description {
  opacity: 0;
}

  figcaption.gallery-caption.gallery-caption-grid-simple {
    display: none;
}
.style-gallery-lightbox-text {
    padding: 10px 0px 25px 0px;
    display: block;
    position: absolute;
    left: 50%;
    top: 100%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-size: 1em;
    text-align: center;
      width: 60%;
}

.style-gallery-lightbox-text p {
    width: auto;
    padding: 10px 15px;
    margin: auto;
    color: #000;
  line-height:2;
    background-color: #fff;
      margin-top:-30px;
}

.gallery-lightbox-item-img {
    height: 90%;
}
  @media screen and (max-width:767px) {
.style-gallery-lightbox-text {
    top: 80%;
}
}

.gallery-caption-grid-simple, .gallery-caption-grid-strips, .gallery-caption-grid-masonry {
    display: none;
}

 

I'm really not a code guy but I try my best, hope someone understands and can help me,

 

Merry christmas to anyone celebrating,

Best

Link to comment
  • Replies 8
  • Views 347
  • Created
  • Last Reply

Top Posters In This Topic

On 1/2/2023 at 10:38 PM, Rayane said:

I have reactivated them on all pages for you to check. They're only visible in the Lightbox

Thank you. I checked. No way to equal caption with = image width.

If you want to adjust white opacity, add this code to DESIGN > CUSTOM CSS

.style-gallery-lightbox-text p {
    background-color: rgba(255,255,255,0.3) !important;
}

0.3 is opacity

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 1/4/2023 at 9:18 AM, tuanphan said:

Thank you. I checked. No way to equal caption with = image width.

If you want to adjust white opacity, add this code to DESIGN > CUSTOM CSS

.style-gallery-lightbox-text p {
    background-color: rgba(255,255,255,0.3) !important;
}

0.3 is opacity

Thank you for your answer. 

I have an issue however, since I already have ligns of coding in the CSS, I'm not sure where to put the lign of code you just gave me?

 

 

Link to comment
On 1/13/2023 at 8:36 PM, Rayane said:

Thank you for your answer. 

I have an issue however, since I already have ligns of coding in the CSS, I'm not sure where to put the lign of code you just gave me?

 

 

You can add to top of CSS box

Remember to save a copy of all CSS box somewhere, just for backup

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.