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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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.