Gallery Caption - Inside Pictures

Site URL: https://octahedron-robin-ml9l.squarespace.com/config/design

Hello

I would like the image caption to appear inside the picture only after I click on it and not outside.

I'm using "Matsuya" Template

Screenshot attached

Thanks a lot!

Hi,

use code in this post. 

Thank you!

But still i'm having problem defining the css correctly 

I'm not a developer so I have no clue what code should I write

I've attached screenshots of what is wrong...

Thank you!

On 11/4/2021 at 6:16 PM, Koren said:

Thank you!

But still i'm having problem defining the css correctly 

I'm not a developer so I have no clue what code should I write

I've attached screenshots of what is wrong...

Thank you!

You can keep the code, then let me know. We will give some more code to remove text under image (non-lightbox) & remove gray

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;
}
[data-section-id="5db2f35f9ff0e37436549a65"] .gallery-grid-item:nth-child(even) .gallery-item-description {
  display: none;
}
.gallery-grid-item[data-slide-url="https://octahedron-robin-ml9l.squarespace.com/config/design/custom-css"] .gallery-item-description {
  display: none;
}

Here is the code I have : can you please write what should I add/remove?

Thank you!! 

14 hours ago, Koren said:

 

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;
}
[data-section-id="5db2f35f9ff0e37436549a65"] .gallery-grid-item:nth-child(even) .gallery-item-description {
  display: none;
}
.gallery-grid-item[data-slide-url="https://octahedron-robin-ml9l.squarespace.com/config/design/custom-css"] .gallery-item-description {
  display: none;
}

 

Here is the code I have : can you please write what should I add/remove?

Thank you!! 

Your site is private. Can you setup password & share url again? We can check easier

https://octahedron-robin-ml9l.squarespace.com/

Password: jojorabit

thank you!

@tuanphan how are you? Maybe you can help. My layout was working fine, I don't know what now I double caption on lightbox. How can I fix it? 

my website: buenorodrigo.com

15 hours ago, buenorodrigo said:

@tuanphan how are you? Maybe you can help. My layout was working fine, I don't know what now I double caption on lightbox. How can I fix it? 

 

my website: buenorodrigo.com

 

Add to Design > Custom CSS

/* double lightbox caption */
.gallery-lightbox .gallery-item-description:last-child {
    display: none;
}

@tuanphan thank you so much!