Overlay to clickthrough to webpage

Hi All,

I have added an overlay to all my images, but i want those overlay to be able to clickthrough to another webpage. How do i achieve this?

Can you share your website URL?

What do you mean by an overlay? Is it an opacity overlay? Are these image blocks or in a gallery?

Thank you for replying. 

Here's the link. https://avocado-falcon-sp84.squarespace.com/residential

When you hover over the projects, this is an overlay i've created. I'd like for user to be able to click on that overlay, then take them to that projects page. Prior to having the overlay, the image use to link to the corresponding webpage. 

Let me know if that makes sense.

How have you created this overlay?

I have used the following CSS script.

@media only screen and (min-width: 640px){
#block-158287dfb82d8bd31480 {
opacity: 0;
 transition: opacity 0.4s
}

#block-158287dfb82d8bd31480:hover {
opacity: 0.6;
transition: opacity 0.4s
}
}

Can someone help with this issue please? Thank you.

Thanks Ziggy,

I understand what you are saying regarding the image block. So, if i change to an image block, can i still have the hover effect happen? 

I would be stacking the text image on top of the project image. Is that right?

22 minutes ago, Zendoodle said:

I would be stacking the text image on top of the project image. Is that right?

Yes, exactly.

It would be useful if you could add a link to a text block like you do with a image block, but until that happens we need this type of method.

It works!! thank you so much. You are a legend.

46 minutes ago, Zendoodle said:

It works!! thank you so much. You are a legend.

Happy to help, thanks for the upvote!