Encyclopedia of Code
Start Here
Private Community
Resources
Categories
Change Image on Hover
This code snippet will allow you to change an image to a different image when the visitor hovers overtop.
Add a Scrollable Image
This code snippet will allow you to add an image that will scroll. This is useful for long images such as a full screenshot of a webpage.
Rotate a Block in Squarespace
This code snippet will allow you to rotate a block in Squarespace.
Move the First Section Down
In Squarespace 7.1, the background image in the first section can be hidden behind the header. This code snippet will allow you to move the first section down so that the full image displays under the header.
Image Flip Card Animation
This code snippet will allow you to place the text and buttons of a poster image on the back of the card. This information will then show using a flip animation when the user hovers overtop of the card.
Resize Related Products | Squarespace 7.0
This code snippet will allow you to resize the related products on product pages for multiple screen sizes in Squarespace 7.0.
Resize Related Products | Squarespace 7.1
This code snippet will allow you to resize the related products on product pages for multiple screen sizes in Squarespace 7.1.
Add a Border or Outline Around Images
This code snippet will allow you to add a border or outline around images.
Vertically Center an Image in a Block
This code snippet will allow you to vertically center an image in various image blocks.
Full Image Captions on Hover | Squarespace 7.1
This code snippet will allow you to edit the image captions in Squarespace 7.1 to cover up the whole image on hover. Keep in mind this technique will only apply to Inline Image Blocks.
Left, Right, or Center Align the Image Subtitle
This code snippet will allow you to left, right, or center align the image subtitle without affecting the title and button.
Make Collage Image Block Stack on Mobile
This code snippet will have the image and text in a collage image block stack when viewed from a mobile device. This is beneficial for when you have a lot of text within the image block.
Text or Images in Two Columns on Mobile
This code snippet will allow you to keep text or images that are placed in two columns on desktop in two columns when viewed from a mobile device.
Move Image Blocks
This code snippet will allow you move image blocks around within or outside of its section.
Resize Product Images for Mobile
These code snippets will allow you resize product images to make your website more mobile friendly.
Center an Image Button
This code snippet will allow you to horizontally center a button in an image block.
Add or Remove Image Filters on Hover
This code snippet will allow you to add or remove a filter when a visitor hovers over an image.
Edit the Banner Image on Mobile
These code snippets will allow you to make changes to a banner or background image when viewed from a mobile device.