How to add text hover on code blocks?

Site URL: https://giraffe-daffodil-te3n.squarespace.com/portfolio

Hi all,

I would like to find a way on how to add and make text appear when the mouse hovers a code block. I've been trying to figure out how to apply a title/text hover effect over my (video) code blocks and image blocks that I created for my website. So far, I have applied a contrast/brightness hover effect, but I would like text to appear as well.

I understand there is already a method to do it for image blocks, but is there a way to do it for code blocks?

Thanks, Lily

Hi. Where is Code Block? can you take a screenshot?

Managed to figure it out! I was able to use this for my reference.

Hi Lily,

I'm having the same issue. I tried the link you included but can't quite figure it out. Any chance you can share the HTML code to include within the code block?

On 3/3/2022 at 3:16 PM, Fulleren said:

Hi Lily,

I'm having the same issue. I tried the link you included but can't quite figure it out. Any chance you can share the HTML code to include within the code block?

Can you share link to page where you added Code Block? WE can help easier

Hi Everyone,

Trying a similar result, but I am a complete novice here.

I have embeddedable audio players (7 of them) which on hover, want to have the phrase "release date: May 18th..." appear over the player and also have the player grey out on hover.  I will also have a pointer-events: none; applied so the player controls will not function.

I followed Lily's reference link https://www.w3schools.com/howto/howto_css_image_overlay.asp for image overlays, but got lost when trying to rewrite the html.

PLEASE HELP!

https://scarlet-sunfish-ks44.squarespace.com/config/design/custom-css

pw: Super

Scroll to bottom of Home page to see the 7 players...

On 5/16/2022 at 8:52 PM, David_Ledger said:

Hi Everyone,

Trying a similar result, but I am a complete novice here.

I have embeddedable audio players (7 of them) which on hover, want to have the phrase "release date: May 18th..." appear over the player and also have the player grey out on hover.  I will also have a pointer-events: none; applied so the player controls will not function.

I followed Lily's reference link https://www.w3schools.com/howto/howto_css_image_overlay.asp for image overlays, but got lost when trying to rewrite the html.

PLEASE HELP!

https://scarlet-sunfish-ks44.squarespace.com/config/design/custom-css

pw: Super

Scroll to bottom of Home page to see the 7 players...

I see you figured it out?