Jump to content

How to add hover effect for a shape that's under an image and text block.

Recommended Posts

Hi there,

As the title says, I'm trying to create a colour shift effect on hover for a shape I'm using as a background for both a picture and a text block.

Unfortunately, the shape only changes colour if I hover over it directly. And I'd like it to change when I'm hovering over every element of the ensemble.

But for the life of me, I cannot seem to find any answers anywhere.

I've used the following bit of code that I managed to pick up via Google search:

/* Change Shape Color on Hover */
#block-43365409002a16e44c9b .sqs-shape {-webkit-transition: .3s ease-in-out;-moz-transition: .3s ease-in-out;-o-transition: .3s ease-in-out;transition: .3s ease-in-out;} 

#block-43365409002a16e44c9b:hover .sqs-shape {background: #dda29a;}

For context, the block IDs are:
shape — #block-43365409002a16e44c9b
text — #block-yui_3_17_2_1_1698248534530_9660
image — #block-7e5a065df27c59db5d73

I've tried adding the other block IDs to the code, but it doesn't work. I apologise in advance, but CSS and code are just not something I've ever done before so it's all a foreign language to me.

So if anyone here can help me, I'd very much appreciate it.

Screenshot 2023-10-27 110955.png

Screenshot 2023-10-27 111017.png

Link to comment
  • Replies 3
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 months later...

I solved a case 3 days ago, but I used script code, each case will require a different code. So if you share link to page where you have problem I can check easier.

On 3/18/2024 at 6:05 AM, SCSeal said:

I would like to bring this question back to life.  Theolreverend did not answer the question, but #tuanphan, can you give us an answer anyways for a general situation? Thank you.


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.