Rayane

Hi everyone, I couldn't find how if it's possible, but can you add caption to Image added through the newer block addition tool? Thank you, Rayane

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?

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

Hi, it's www.rayanevuillemin.com

Anyone?

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

Oh of course, sorry I didn't do it in the first place. Here : www.rayanevuillemin.com

Hi everyone. I've been looking for ways to do this for a while now but every code I've tried didn't work for my precise purpose. I can't code my self, so it was all copy-pasting what I had found on the internet. I am looking for a way to make potential captions of my picture ONLY show up when in Lightbox, so that it doesn't affect the overall aesthetic of the said page. That's it. I hope someone had the same problem and maybe coded it, I'll appreciate any help!

I too would like to have image description only appearing while the Lightboxing is on, but I'm pretty sure the code you shared won't work on my website right? Here is my website : rayanevuillemin.squarespace.com

Site URL: https://rayanevuillemin.squarespace.com/ Hi everyone, I am new to this part of squarespace, I didn't even know we could code things. I have no experience whatsoever in coding, so I hope someone can help me figure this out. I am making a new website for my photography, and I would like the following things for my website, but couldn't find any normal way to make it happen. When one clicks on any of the pictures of my website, the lightbox appears. I would like to have picture descriptions that only appear when one clicks on the picture. I would like to add the name of each species of animal, and for it to be visible ONLY when in Lightbox mode, so that it doesn't mess with the regular page's layout. I would also like the Lightbox mode to be less transparent. I have found the setting and I pushed it to the less transparent it can be, but that's not enough in my opinion. Is it possible to code it so that it's almost entirely opaque? If anyone can help, I'll be very grateful, Thank you in advance Rayane