Can't add link to image with text overlay

Hi all,

I have 3x images with overlay text added in CSS, but now I can't seem to be able to add the image links in.

When I click on the overlay text block, then the edit icon, then the link icon, it won't let me add a link in without a link name - which I don't want displayed, as I already have title text on there (attached).

I click "apply", then close the box, but nothing changes.

I've tried adding the link to the image under the text but it doesn't work since the text overlay is on top.

URL: https://pineapple-apple-52zp.squarespace.com/home-1

Is there a way to do this? Using 7.1.

Thank you 

Hello, is anyone able to help with this? Thank you

You mean you need text, overlay color, image clickable?

@tuanphan yes - either the image under the overlay to be clickable, or the whole overlay to be clickable. The issue I'm having with adding a link to the overlay is that I need to add "link name", but the text is already there. Is there a way to either (1) add a link to the overlay without having to add the link name or (2) make the image clickable when it's sitting under the overlay?

Attached is a screenshot of the overlay text already in place.

Thank you

On 10/17/2023 at 1:05 PM, SPR_85 said:

Hi all,

I have 3x images with overlay text added in CSS, but now I can't seem to be able to add the image links in.

When I click on the overlay text block, then the edit icon, then the link icon, it won't let me add a link in without a link name - which I don't want displayed, as I already have title text on there (attached).

I click "apply", then close the box, but nothing changes.

I've tried adding the link to the image under the text but it doesn't work since the text overlay is on top.

URL: https://pineapple-apple-52zp.squarespace.com/home-1

Is there a way to do this? Using 7.1.

Thank you 

 

The page doesn't exist. Can you check it again?

Hi, I'm struggling with the same issue, I'm creating a website where I have recent projects. I have added a hover over text box with colour. I want each overlay text box to link to the relevant project page. Hoe can I do this? I have added custom CSS for the hover over text.  I'm going to be adding more images with this hover over text and might want to change the sizes of the images soon as I haven't finished the full layout. Is there a code I can add to make this happen and where do I add it?

@media only screen and (min-width: 640px){
#block-ec593547f5e77e971414 {
opacity: 0;
 transition: opacity 2s
}

#block-ec593547f5e77e971414:hover {
opacity: 1;
transition: opacity 1s
}
}
@media only screen and (min-width: 640px){
#block-b461d5eee4fbba781f8b {
opacity: 0;
 transition: opacity 2s
}

#block-b461d5eee4fbba781f8b:hover {
opacity: 1;
transition: opacity 1s
}
}

On 11/1/2023 at 10:50 PM, GeorgeH1987 said:

Hi, I'm struggling with the same issue, I'm creating a website where I have recent projects. I have added a hover over text box with colour. I want each overlay text box to link to the relevant project page. Hoe can I do this? I have added custom CSS for the hover over text.  I'm going to be adding more images with this hover over text and might want to change the sizes of the images soon as I haven't finished the full layout. Is there a code I can add to make this happen and where do I add it?

@media only screen and (min-width: 640px){
#block-ec593547f5e77e971414 {
opacity: 0;
 transition: opacity 2s
}

#block-ec593547f5e77e971414:hover {
opacity: 1;
transition: opacity 1s
}
}
@media only screen and (min-width: 640px){
#block-b461d5eee4fbba781f8b {
opacity: 0;
 transition: opacity 2s
}

#block-b461d5eee4fbba781f8b:hover {
opacity: 1;
transition: opacity 1s
}
}

Try this new code, if it doesn't work, please share link to page, we can check easier

@media only screen and (min-width: 640px){
#block-ec593547f5e77e971414 {
opacity: 0 !important;
 transition: opacity 2s
}

#block-ec593547f5e77e971414:hover {
opacity:1 !important;
transition: opacity 1s
}
}
@media only screen and (min-width: 640px){
#block-b461d5eee4fbba781f8b {
opacity: 0 !important;
 transition: opacity 2s
}

#block-b461d5eee4fbba781f8b:hover {
opacity: 1 !important;
transition: opacity 1s
}
}