Jump to content

How to Overlap Image Between Three Sections

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://cooperconnect.squarespace.com/

I'm wondering how I can overlap an image onto three different sections in 7.0 Brine template.

I have a small opt-in section with an image of an iPad that I want to overlap with the sections above and below it as in the attached image.

Negative margins just cuts off the image and I haven't had luck making the overflow visible or changing the z-index.

I appreciate any suggestions! Thank you!

 

Password: cooperconnect

Cooper Connect Website Mockup_Header + Opt In.png

Link to comment
  • Solution
On 4/5/2022 at 2:35 AM, daniellevickers said:

Site URL: https://cooperconnect.squarespace.com/

I'm wondering how I can overlap an image onto three different sections in 7.0 Brine template.

I have a small opt-in section with an image of an iPad that I want to overlap with the sections above and below it as in the attached image.

Negative margins just cuts off the image and I haven't had luck making the overflow visible or changing the z-index.

I appreciate any suggestions! Thank you!

 

Password: cooperconnect

Cooper Connect Website Mockup_Header + Opt In.png

The following code works on my testing

#block-yui_3_17_2_1_1649021182285_3402 img {
  transform: scale(1.1);
  left: 6% !important;
}
#block-yui_3_17_2_1_1649021182285_3402 * {
  overflow: visible !important;
}
#opt-in {
  overflow: visible;
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment

My testing

image.thumb.png.dac1f54b999210a62c53828263b39312.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.