Jump to content

Add hyperlink to Text Block ID

Recommended Posts

Help needed!

I have a series of images that on hover reveal a full-width text block, it replicates the old hover-text functionality of Squarespace 7.0 – now not supported in 7.1 for accessibility/user experience reasons, I guess?

I achieved this with some custom CSS, it works really well except that on hover the text block, blocks the link applied to the image, making the link redundant. Here lies the problem. Does anyone now how to apply a link to a text block ID or have a work around?

I did stumble across a post that mentioned a similar issue and they used z-index as a work around. I had no joy with this though.

Any help much appreciated. Thanks in advance.

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 2/23/2023 at 7:43 PM, hellostudiojohn said:

Hi Tuan, 

Many thanks for replying to this thread.

Here is the URL https://www.coalcornwall.com/projects

Any help would be much appreciated.

Thanks!

You mean make image block behind text 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

Use Classic Image Block will be easier

With current block, add this to Last line in Code Injection > Footer

<script>
$(document).ready(function() {
	$(".fe-block-yui_3_17_2_1_1675536341622_84064").click(function() {
  window.location = $(this).find("a").attr("href"); 
  return false;
});
});
</script>
<style>
  .fe-block-yui_3_17_2_1_1675536341622_84064 {
    cursor: pointer;
}
</style>

 

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.