How to place an image between index pages in Brine theme Squarespace sites
This code uses CSS to pull an image up from one index page and places over the top section, making it look like the image is hovering between the two index pages. There are two important parts to this code; one moves the image, and the other makes it show up above both index pages.
This part is super important: this is a Brine theme tutorial! if you are using version 7.1 you should check out this tutorial to learn how to place an image between page sections in version 7.1.
And if you have no idea what version or theme you are using, that is really important info to know when playing with code! Check out this article about Squarespace theme families and versions to find out what you are working with.
Here is the code for this tutorial. This code will add a negative top margin to an image on your site so it will hover between two sections.
.sqs-block-image {margin-top:-50%} .Index-page{overflow:visible}
If you are trying to target a specific image with a block id (which I STRONGLY recommend) add that block id instead of .sqs-block-image like this:
#block-yui-123456789 {margin-top:-50%} .Index-page{overflow:visible}
Here is a link to the chrome extension I use to easily find block ID’s in Squarespace. *Please note I am not affiliated with them in any way, I just use this extension in my own work!
Want to adjust this code for the mobile version of your site? Add this media query in a new line to make sure it only applies to screens smaller than 640px in width. Don’t forget to change that example text to the right block id!
@media only screen and (max-width:640px) { #block-yui-123456789 {margin-top:-50%} .Index-page{overflow:visible} }
Important info:
✨ There is more than one way to do this! This is just one approach of many because code is super customizable.
🔗 If you want this to happen on a single page, and you aren’t using the block ID for the image, follow the steps in this tutorial on how to install this code on a single page in your Squarespace site.
🙋 Need some help? Visit insidethesquare.co/code-help to see my current support options.
