Add hyperlink to Text Block ID

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.

Hi,

What is your site url? We can check easier

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!

In the first image, you'll see the issue on hover. I have added a link to the text though, just as a heads-up.

Also on mobile, it works fine I have disabled the text hover function as it's not supported on modern mobile web browsers.

If you need any further clarity or information do let me know.

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?

In the first image, you'll see the issue on hover. I have added a link to the text though, just as a heads-up.

Also on mobile, it works fine I have disabled the text hover function as it's not supported on modern mobile web browsers.

If you need any further clarity or information do let me know.

Yes, that's what I meant, thanks!

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>