Captions and opacity

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. 

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

Anyone?

Hi,

What is your site url? We can check easier

18 hours ago, tuanphan said:

Hi,

What is your site url? We can check easier

Hi, it's www.rayanevuillemin.com 

On 12/30/2022 at 4:28 AM, Rayane said:

Hi, it's www.rayanevuillemin.com 

 

Thank you. Which page are you referring to? I Don't see caption on homepage

13 hours ago, tuanphan said:

Thank you. Which page are you referring to? I Don't see caption on homepage

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

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

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?

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