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

I am also facing this problem and have CSS code for the text overlay, how can I add a clickable link to this overlay? 

When I go to add it in the edit settings it doesn't recognise that I've changed anything and has no saveable option... I would like them to link to my services page and even better if to the corrilating page section.

URL: https://www.lahbu.com.au/ 
the (scroll down to images surrounded by 'creating for you') 

I hope someone can help

21 hours ago, lahbu said:

I am also facing this problem and have CSS code for the text overlay, how can I add a clickable link to this overlay? 

When I go to add it in the edit settings it doesn't recognise that I've changed anything and has no saveable option... I would like them to link to my services page and even better if to the corrilating page section.

URL: https://www.lahbu.com.au/ 
the (scroll down to images surrounded by 'creating for you') 

I hope someone can help

Can you add link to h3 text? Then I will give code to make this link cover whole block/overlay, so they will be clickable.

You cant physically add the link....you click on the text overlay in the edit menu, then click edit text, click add link, add the link to the correct page, and close out of that because there is no specific save button to 'save' the link, then usually the main save button up the top of the page to save any changes can be clicked to save your edits but because the system is not recognising any changes made the save button up the top is n to highlighted and therefore you are unable to save anything. 

I don't know if this is a system error or something but thought that even so, there might be a custom CSS code that we could use to rectify it nonetheless.

First, highlight text > Click Link icon

Enter a link, for example, I use google.com

wait 2-3 seconds then click outside text block >> link will save automatically