Jump to content

Can't add link to image with text overlay

Recommended Posts

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 

 

Screenshot 2023-10-17 at 17.01.16.png

Edited by SPR_85
Bumping up as no response
Link to comment
  • SPR_85 changed the title to Can't add link to image with text overlay
  • Replies 10
  • Views 2.6k
  • Created
  • Last Reply

Top Posters In This Topic

@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

Screenshot 2023-10-21 at 13.02.14.png

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

 

Screenshot 2023-10-17 at 17.01.16.png

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

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
  • 2 weeks later...

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

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

 

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
  • 6 months later...

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

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

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

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.

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.