Changing Background Color On Hovering Gallery

Hello, 

I'm currently working on a website for my client. She would like the background color to change upon hovering over a gallery. 

Here's the page I'd like to apply the customization to: https://www.lovelyinlace.me/choose-your-studio-v2

It will be within the homepage index as she's on Squarespace 7.0.

Is there a custom CSS code that can change the background color of the page section upon hovering over the second gallery? Really appreciate any help with this, Thanks!

 

You mean hover gallery 2 (red arrow) > Change page white background?

Hi @tuanphan Yes! When you hover over Gallery 2 (the one with the red arrow), I'd like the white page background to turn to black. Is there a custom code that can achieve this? The client is on Squarespace 7.0 on a Brine family template.

Hey @tuanphan would you be able to look at this, I believe the only way to achieve this is custom code? 

@creedon @Ziggy @Sarah_SQSP @paul2009

🙏

If anyone else on the forum knows a solution to this I'd greatly appreciate it ❤️

The issue here is, I think, if I understand the desired effect, is that there is no way with CSS alone to hover over the gallery and effect the styling of a ancestor element. In this case the element that has the background color.

You would need JavaScript to detect the hover over gallery and then set a class higher up in the chain to get the effect.

This would require the business plan or above and of course the JavaScript code to be written. I know of no code that does this.

Hi @creedon Thank you for your response, I appreciate it.