Jump to content

Adding a clickable URL to a Text Box with Hover-to-Reveal

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://www.hannahmillardesign.com/

Site password: design

I'm wanting to create "case study images" that reveal the "case study name" when you hover over the image on the homepage. I was able to successfully code this function following this tutorial: https://www.youtube.com/watch?v=llSO2AMIb3M

I want users to be able to click the "case study name" text box to be directed to the full page. However, overlaying a text box over an image removes the function that allows you to add a URL to an image that can be clicked.

How can I code a URL to be clickable on the hover-to-reveal text box?

 

Frame 24.png

Link to comment
29 minutes ago, hannahmillardesign said:

Site URL: https://www.hannahmillardesign.com/

Site password: design

I'm wanting to create "case study images" that reveal the "case study name" when you hover over the image on the homepage. I was able to successfully code this function following this tutorial: https://www.youtube.com/watch?v=llSO2AMIb3M

I want users to be able to click the "case study name" text box to be directed to the full page. However, overlaying a text box over an image removes the function that allows you to add a URL to an image that can be clicked.

How can I code a URL to be clickable on the hover-to-reveal text box?

 

Frame 24.png

Can you try adding the link to the text? I can try some css code to make text cover all block

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • Solution
7 minutes ago, hannahmillardesign said:

Hi! I just added the page links to each text box. I would also prefer the text to not be underlined when the URL is added, so I'll explore my options for that. 

Try the following Css Code

#block-yui_3_17_2_1_1664924299821_63995 .sqs-block-content {
  height: 100%;
}

#block-yui_3_17_2_1_1664924299821_63995 p {
  height: 100%;
}

#block-yui_3_17_2_1_1664924299821_63995 a {
  height: 100%;
  display: block;
}

#block-yui_3_17_2_1_1664924299821_63995 span {
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;  
  text-decoration: none;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
24 minutes ago, bangank36 said:

Try the following Css Code

#block-yui_3_17_2_1_1664924299821_63995 .sqs-block-content {
  height: 100%;
}

#block-yui_3_17_2_1_1664924299821_63995 p {
  height: 100%;
}

#block-yui_3_17_2_1_1664924299821_63995 a {
  height: 100%;
  display: block;
}

#block-yui_3_17_2_1_1664924299821_63995 span {
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;  
  text-decoration: none;
}

 

The code worked beautifully - thank you so much for your help! 

Link to comment
  • 4 months later...

Hi @Beyondspace -

I am having exactly the same issue as @hannahmillardesign was - but the code is not working for me - or I'm not exactly sure if I'm placing it correctly. 🙁 Would you mind helping me out?

I have used the following code to make text appear over the image when hovering (but can't figure out how to make the entire block a clickable URL)

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

#block-a9eab1f1e8680f0bf40c:hover { 
opacity: 1; 
transition: opacity 1s 

}

Can you please advise on how I can add your code to this code? Or if I should remove this code altogether?

 

Quote
On 10/5/2022 at 5:28 AM, Beyondspace said:

Try the following Css Code

#block-yui_3_17_2_1_1664924299821_63995 .sqs-block-content {
  height: 100%;
}

#block-yui_3_17_2_1_1664924299821_63995 p {
  height: 100%;
}

#block-yui_3_17_2_1_1664924299821_63995 a {
  height: 100%;
  display: block;
}

#block-yui_3_17_2_1_1664924299821_63995 span {
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;  
  text-decoration: none;
}

 

 

 

Frame 1 (1).png

Link to comment
On 2/13/2023 at 11:02 PM, ennkay said:

ut the code is not working for me - or I'm not exactly sure if I'm placing it correctly. 🙁 Would you mind helping me out?

I have used the following code to make text appear over the image when hovering (but can't figure out how to make the entire block a clickable URL)

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

#block-a9eab1f1e8680f0bf40c:hover { 
opacity: 1; 
transition: opacity 1s 

}

Can you please advise on how I can add your code to this code? Or if I should remove this code altogether?

 

 

Frame 1 (1).png

Can you share link to this page? We can help easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

I'm using the following code (same as the solution above, but with my text block ID.)  It's making the whole text block "clickable", but it's moving the text within the block to the top, rather than being centered horizontally and vertically. 
Website is ** removed **  and the code is applied to the first image / text block.
Any idea's ? 
 

#block-8f2be76e0c965cf24e1a .sqs-block-content {
  height: 100%;
}

#block-8f2be76e0c965cf24e1a h2 {
  height: 100%;
}

#block-8f2be76e0c965cf24e1a a {
  height: 100%;
  display: block;
}

#block-8f2be76e0c965cf24e1a span {
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;  
  text-decoration: none;
}

Edited by matthewevas
Link to comment
On 4/14/2023 at 1:41 AM, matthewevas said:

I'm using the following code (same as the solution above, but with my text block ID.)  It's making the whole text block "clickable", but it's moving the text within the block to the top, rather than being centered horizontally and vertically. 
Website is https://www.matthewevas.co.uk and the code is applied to the first image / text block.
Any idea's ? 
 

#block-8f2be76e0c965cf24e1a .sqs-block-content {
  height: 100%;
}

#block-8f2be76e0c965cf24e1a h2 {
  height: 100%;
}

#block-8f2be76e0c965cf24e1a a {
  height: 100%;
  display: block;
}

#block-8f2be76e0c965cf24e1a span {
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;  
  text-decoration: none;
}

It looks fine to me. You try clearing browser cache

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.