Jump to content

Creating a text and color hover overlay on an image block

Recommended Posts

Posted

Site URL: https://corn-halibut-gfxb.squarespace.com/config/pages

Hi! 

 

I am desperate to figure out how to add a color and text hover overlay to my site. I followed a Youtube video, which gave me the directions to create a colored text box on top of the image block, then enter this code with the correct block ID's-

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

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

 

While this works, it also makes my image blurry when I am not hovering over it. Any help would be GREATLY appreciated. Thank you so much!

Screenshot 2024-11-26 at 1.09.26 PM.png

  • Replies 1
  • Views 61
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.