Jump to content

7.1 Gallery Image Text Overlay No Longer Working Correctly

Go to solution Solved by tuanphan,

Recommended Posts

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.)

image.png.694f1b71e7fbbabd67f1e5916b59aef5.png

 

Link to comment
  • Solution

Hi, 

Edit this code

.gallery-caption-content {
    color: white;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
}

to this code

figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    color: white;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
}

and EDIT this code

.gallery-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}

TO this code

.gallery-grid-item:hover figcaption.gallery-caption .gallery-caption-wrapper .gallery-caption-content {
    opacity: 1 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Screen Shot 2021-12-29 at 12.03.12 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

Link to comment
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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!

image.png.0edb3b28f84d0ca7c98c89ce7485e104.png

Link to comment
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!

image.png.0edb3b28f84d0ca7c98c89ce7485e104.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

image.png.dd7545b75a3925c8040c4cc9e1629394.png

Add this CSS under

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.