hannahmillardesign Posted October 5, 2022 Share Posted October 5, 2022 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? Link to comment
Beyondspace Posted October 5, 2022 Share Posted October 5, 2022 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 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, Keyword HighlighterIf 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
hannahmillardesign Posted October 5, 2022 Author Share Posted October 5, 2022 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. Link to comment
Solution Beyondspace Posted October 5, 2022 Solution Share Posted October 5, 2022 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, Keyword HighlighterIf 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
hannahmillardesign Posted October 5, 2022 Author Share Posted October 5, 2022 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! Beyondspace 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment