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

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?

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?

 

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

12 minutes ago, bangank36 said:

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

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. 

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!