Hi, I've added a code found in this forum (I believe it's from @brandon), in my custom CSS in order to remove the captions in the gallery blocks and have them in the lightbox instead (very much like 7.0, I don't know why they wouldn't keep that but eh).
So it works great, but I wonder if there's a way to make it look like a 7.0 lightbox caption so that:
- it matches the length of the image, wether it's portrait or landscape mode.
- the opacity is reduced and the block is overing the image.
Basically, the first screenshot is what I have now on my 7.1 website, and the second is what I would like to have back 🙂
Thanks a lot!
This is the code I have:
.image-caption-wrapper {
background: none !important; /* Background Overlay*/
margin-left:25px;
}
/**
* Add descriptions/captions to galleries in Squarespace 7.1.
* CSS
* © @brandon (Squarespace Forum User)
* This software is provided "as is", without warranty of any kind, express or implied.
*/
body {
width: 100%;
}
section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
position: relative;
}
.gallery-item-description {
font-family: Lato;
font-weight: 200;
font-style: normal;
line-height: 1.8em;
font-size: 15px;
margin: 0 0 1em;
color: #EBEBEB;
}
.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: 0.5em;
padding: 1em 2em;
max-width:55%;
text-align:center;
background-color: #121212;
transition: opacity 0.1s ease-out;
}
.gallery-lightbox-item[data-in=false] .gallery-item-description {
opacity: 0;
}
