Add a zoom in effect to page’s background image when hovered. This plugin uses css editor and works with Squarespace 7.1.

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the codes below into the Custom CSS Editor box.

Next, you’ll need to locate each page section’s ID that you’d like to target. Use this free Chrome Extension to easily copy each page section’s ID.

Copy the Data-Section-ID for each page section and replace section[data-section-id="1234"] in both areas of the CSS with this code. Adding this ID for the specific page section will add the zoom effect to the background image.

Adjust the scale and transition values in both codes to your liking.