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! 

Hi @Beyondspace -

I am having exactly the same issue as @hannahmillardesign was - but the code is not working for me - or I'm not exactly sure if I'm placing it correctly. 🙁 Would you mind helping me out?

I have used the following code to make text appear over the image when hovering (but can't figure out how to make the entire block a clickable URL)

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

#block-a9eab1f1e8680f0bf40c:hover { 
opacity: 1; 
transition: opacity 1s 
} 
}

Can you please advise on how I can add your code to this code? Or if I should remove this code altogether?

 

Quote

On 10/5/2022 at 5:28 AM, Beyondspace 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;
}

 

 

On 2/13/2023 at 11:02 PM, ennkay said:

ut the code is not working for me - or I'm not exactly sure if I'm placing it correctly. 🙁 Would you mind helping me out?

I have used the following code to make text appear over the image when hovering (but can't figure out how to make the entire block a clickable URL)

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

#block-a9eab1f1e8680f0bf40c:hover { 
opacity: 1; 
transition: opacity 1s 
} 
}

Can you please advise on how I can add your code to this code? Or if I should remove this code altogether?

 

 

Can you share link to this page? We can help easier

I'm using the following code (same as the solution above, but with my text block ID.)  It's making the whole text block "clickable", but it's moving the text within the block to the top, rather than being centered horizontally and vertically. 
Website is ** removed **  and the code is applied to the first image / text block.
Any idea's ? 
 

#block-8f2be76e0c965cf24e1a .sqs-block-content {
  height: 100%;
}

#block-8f2be76e0c965cf24e1a h2 {
  height: 100%;
}

#block-8f2be76e0c965cf24e1a a {
  height: 100%;
  display: block;
}

#block-8f2be76e0c965cf24e1a span {
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;  
  text-decoration: none;
}

On 4/14/2023 at 1:41 AM, matthewevas said:

I'm using the following code (same as the solution above, but with my text block ID.)  It's making the whole text block "clickable", but it's moving the text within the block to the top, rather than being centered horizontally and vertically. 
Website is https://www.matthewevas.co.uk and the code is applied to the first image / text block.
Any idea's ? 
 

#block-8f2be76e0c965cf24e1a .sqs-block-content {
  height: 100%;
}

#block-8f2be76e0c965cf24e1a h2 {
  height: 100%;
}

#block-8f2be76e0c965cf24e1a a {
  height: 100%;
  display: block;
}

#block-8f2be76e0c965cf24e1a span {
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;  
  text-decoration: none;
}

It looks fine to me. You try clearing browser cache

Hi @tuanphan, I’ve been trying to implement the same code but I’m having issues. On the first section of the homepage page, the box is only clickable on the text link itself, and to the left and the right of it. I’d like the whole box to be clickable instead. I’d also like to apply the same code to the sections below too. Would I add the other blocks id with a comma in between? I’d appreciate any help with this. Thanks in advance!

Website: www.laetitiaeaton.com
Password is 2023

Current css code is:

@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1690501206074_5011,
#block-yui_3_17_2_1_1690826601529_1565,
#block-yui_3_17_2_1_1690826800724_3590,
#block-yui_3_17_2_1_1690828278700_5096 {
opacity: 0;
transition: opacity 0.2s
}

#block-yui_3_17_2_1_1690501206074_5011:hover,
#block-yui_3_17_2_1_1690826601529_1565:hover,
#block-yui_3_17_2_1_1690826800724_3590:hover,
#block-yui_3_17_2_1_1690828278700_5096:hover{
opacity: 1;
transition: opacity 0.2s
}
}

#block-yui_3_17_2_1_1690501206074_5011 .sqs-block-content {
  height: 100%;
}

#block-yui_3_17_2_1_1690501206074_5011 p {
  height: 100%;
}

#block-yui_3_17_2_1_1690501206074_5011 a {
  height: 100%;
  display: block;
}

#block-yui_3_17_2_1_1690501206074_5011 span {
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  text-decoration: none;
}

14 hours ago, LaetitiaEaton said:

Hi @tuanphan, I’ve been trying to implement the same code but I’m having issues. On the first section of the homepage page, the box is only clickable on the text link itself, and to the left and the right of it. I’d like the whole box to be clickable instead. I’d also like to apply the same code to the sections below too. Would I add the other blocks id with a comma in between? I’d appreciate any help with this. Thanks in advance!

Website: www.laetitiaeaton.com
Password is 2023

Current css code is:

@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1690501206074_5011,
#block-yui_3_17_2_1_1690826601529_1565,
#block-yui_3_17_2_1_1690826800724_3590,
#block-yui_3_17_2_1_1690828278700_5096 {
opacity: 0;
transition: opacity 0.2s
}

#block-yui_3_17_2_1_1690501206074_5011:hover,
#block-yui_3_17_2_1_1690826601529_1565:hover,
#block-yui_3_17_2_1_1690826800724_3590:hover,
#block-yui_3_17_2_1_1690828278700_5096:hover{
opacity: 1;
transition: opacity 0.2s
}
}

#block-yui_3_17_2_1_1690501206074_5011 .sqs-block-content {
  height: 100%;
}

#block-yui_3_17_2_1_1690501206074_5011 p {
  height: 100%;
}

#block-yui_3_17_2_1_1690501206074_5011 a {
  height: 100%;
  display: block;
}

#block-yui_3_17_2_1_1690501206074_5011 span {
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  text-decoration: none;
}

I can't find a code to do this. You can consider using Gallery Section, will be easier to achieve this. If you want, I will give a guide to create same layout + hover effect + clickable with Gallery Section

7 hours ago, tuanphan said:

I can't find a code to do this. You can consider using Gallery Section, will be easier to achieve this. If you want, I will give a guide to create same layout + hover effect + clickable with Gallery Section

Yes, that would work for me. I just added a gallery section at the bottom of the homepage.

On 8/1/2023 at 11:05 AM, LaetitiaEaton said:

Yes, that would work for me. I just added a gallery section at the bottom of the homepage.

Thanks for the pointers. I think I found the solution and the code!

6 hours ago, LaetitiaEaton said:

Thanks for the pointers. I think I found the solution and the code!

@LaetitiaEaton

Can you share your solution ?
I already have this working on one of my pages, but can't get it working on a new page using the same code I used (after updating the block ID's) !
I'm stuck on making the whole text block clickable !

On 8/4/2023 at 8:26 AM, matthewevas said:

@LaetitiaEaton

Can you share your solution ?
I already have this working on one of my pages, but can't get it working on a new page using the same code I used (after updating the block ID's) !
I'm stuck on making the whole text block clickable !

Can you share link to page where you have problem?