Jump to content

Change page background colour when hovering over image blocks

Go to solution Solved by timjphoto,

Recommended Posts

Hi there, 

I'm looking for a way to change the background colours of my homepage when hovering over specific image blocks - this is a good example of the effect I'm after - https://www.willdouglas.co.uk/

I've found similar discussions on the forum but nothing has quite solved this for me, if anyone knows of any code to achieve this that would be amazing!

Thanks in advance, 

 

Tim. 

Link to comment
  • Solution
Posted (edited)

For anyone who is interested I solved this using the following CSS:

//background colour

body {background: white;
transition: background 0.5s ease;}

body:has(#block-yui_3_17_2_1_1647613312964_40288:hover)
{background: #99ccff}

I had to change the block id and background colour individually which took a while, and I'm sure there is probably a simpler way but this worked for me, hope it helps someone!

Edited by timjphoto
edit
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.