This tutorial will show you how to flip an image on hover on Squarespace. This code has been tested on Squarespace 7.1.

A useful tool you can use to identify the #collection-id, #blockidnumber and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which I fully recommend.

Complexity: Easy

Step 1

Insert an image block and from the design tab select the ‘Poster’ option

Step 2

Use the code below to flip the image.

Step 3

Replace the [BLOCK ID] with the actual Image Block ID.

Change background colour “background: rgba(255, 99, 71, 1)” to your desired branding.

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.