Change a page section background on a hover

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

In this Squarespace tutorial, you’ll learn how to create a hover effect that changes the background for an individual page section. We’ll use custom code to change the color of the background and the color of the text. We’ll also adjust an image background, changing its opacity on a hover.

Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider.

I recorded a new tutorial, where you'll learn how to access these new design options and what your settings are.

All the codes from this tutorial are below, BUT there two things you need to know:

→ This is specific for page sections in version 7.1, both classic and fluid. This won’t work for gallery sections, but every other page section type, including list/people sections

→ There is more than one way to do this! Code is super customizable, and this is my technique.

Here are all the codes from this tutorial:

This one will change the color of the page section background on a hover:

#page .page-section:hover .section-background{background-color:#000!important}

Add this code to change the color of any text that is in that page section:

#page .page-section:hover * {color:#FFF!important}

This code will change the opacity of the page section background image, making it more transparent on a hover, and showing the page color underneath.

#page .page-section:hover .section-background{opacity:0.5!important}

This code will reverse that, making the image fully visible on a hover, and slightly transparent when not hovering over that section with your cursor.

#page .page-section .section-background{opacity:0.5!important}

#page .page-section:hover .section-background{opacity:1!important}

To isolate one page section, replace #page .page-section with the data section ID. I use this free Chrome extension to grab that info; not affiliated - just a fan! chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

You can slow the transition on any of these codes by adding this before the final bracket:

; transition: all 1s