7.1 Gallery Image Text Overlay No Longer Working Correctly

Site URL: https://www.bdg-inc.com/office-buildings-working-environments

Hi all,

I recently noticed that the pages where I am using @tuanphan's "Gallery Grid Collection" custom CSS stopped displaying properly. I am assuming maybe Squarespace changed something on their end?

If I recall correctly, the page should show thumbnails, and when you mouseover them you get a color overlay, and text. For me, the text is visible without the mouseover. Below is with the mouseover and without (those are 2 separate projects, that's why the thumbnail is different.)

@tuanphandoes this code apply if we wanted to add hover text to the portfolio page instead of the text showing below the photo?

On 12/31/2021 at 2:34 AM, geearias said:

@tuanphandoes this code apply if we wanted to add hover text to the portfolio page instead of the text showing below the photo?

The code for Gallery Section. With portfolio page, you need another code. Can you share link to portfolio page? We can check easier

Thank you @tuanphan that worked great! You are the MVP of this forum.

Do you know if Squarespace changed something on their end? Is that the reason is stopped working properly?

On 1/1/2022 at 10:16 PM, tuanphan said:

The code for Gallery Section. With portfolio page, you need another code. Can you share link to portfolio page? We can check easier

Hey @tuanphan - thank you for your response. Heres the page and PW:

https://carlycushine.squarespace.com/portfolio

CUSHNIE

On 1/3/2022 at 6:48 PM, spacecowboy said:

Thank you @tuanphan that worked great! You are the MVP of this forum.

Do you know if Squarespace changed something on their end? Is that the reason is stopped working properly?

Maybe they added a few class names, causing the priority of the code to change.

19 hours ago, geearias said:

Hey @tuanphan - thank you for your response. Heres the page and PW:

 

https://carlycushine.squarespace.com/portfolio

CUSHNIE

You mean 5 blog items on /portfolio page?

Initial: Show image, Hide title/read more

Hover: Show overlay + Title/read more over image

is this right?

1 hour ago, tuanphan said:

Maybe they added a few class names, causing the priority of the code to change.

You mean 5 blog items on /portfolio page?

Initial: Show image, Hide title/read more

Hover: Show overlay + Title/read more over image

is this right?

Yes and no.

Yes to the blog items.

Initial: Show image, Hide title only, Show Read More Under Image

Hover: Show overlay + Title over image

Thank you @tuanphan. Definitely the MVP!

10 hours ago, geearias said:

Yes and no.

Yes to the blog items.

Initial: Show image, Hide title only, Show Read More Under Image

Hover: Show overlay + Title over image

Thank you @tuanphan. Definitely the MVP!

Don't remove/edit any code in your current code

Add this to Design > Custom CSS

/* Portfolio page hover */
body#collection-6170b1f1c7f2cd4ae4013d8a {
a.BlogList-item-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}
article.BlogList-item {
    position: relative !important;
}
a.BlogList-item-image-link:after {
    content: "";
    background-color: #edebe3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
}
a.BlogList-item-title {
    opacity: 0;
}
article:hover a.BlogList-item-title {
    opacity: 1;
}
article:hover a.BlogList-item-image-link:after {
    opacity: 1;
}}

Thank you @tuanphan. That worked. If we wanted to change alignment of title text, where would we add that code?

5 hours ago, geearias said:

Thank you @tuanphan. That worked. If we wanted to change alignment of title text, where would we add that code?

edit this code

a.BlogList-item-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}

to this

a.BlogList-item-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
text-align: right !important;
}

@tuanphan Thanks again, since we have a dialogue going, I figured I'd ask one more question.

Is it possible to break the "caption" up into 2 lines with different fonts or font weights? Where I could put the clients name one top in Bold and the job name below in a lighter style font. I've seen it talked about on here but I don't think I have come across a solution. If not, no big deal. The client likes it as is. I am just curious. Thanks!

On 1/5/2022 at 6:40 PM, spacecowboy said:

@tuanphan Thanks again, since we have a dialogue going, I figured I'd ask one more question.

Is it possible to break the "caption" up into 2 lines with different fonts or font weights? Where I could put the clients name one top in Bold and the job name below in a lighter style font. I've seen it talked about on here but I don't think I have come across a solution. If not, no big deal. The client likes it as is. I am just curious. Thanks!

In Description box, edit this

Quote

Analog Devices - World Headquarters

to this

<span>Analog Devices</span> - <span>World Headquarters</span>

Do similar for other items

next, add this to Design > Custom CSS

.gallery-caption-content span:first-child {
    font-weight: bold;
	font-size: 30px;
}
.gallery-caption-content span:last-child {
    font-weight: 300;
	font-sizez: 10px;
}

Thanks @tuanphan, I think we are almost there!

It is putting the 2 lines next to each other rather than stacking them. Any thoughts?

I made a test page here: https://www.bdg-inc.com/testest

password: secretsecret

On 1/14/2022 at 7:21 PM, spacecowboy said:

Thanks @tuanphan, I think we are almost there!

It is putting the 2 lines next to each other rather than stacking them. Any thoughts?

I made a test page here: https://www.bdg-inc.com/testest

password: secretsecret

Add this CSS under

.gallery-caption-wrapper p {
    flex-direction: column;
}

That worked out great! Thank you so much!