Jump to content

Overlap images and sections with 7.1

Go to solution Solved by tuanphan,

Recommended Posts

  • Solution
/* remove section bottom padding */
[data-section-id="5ddd4eb4522cc3312c5226a6"] .content-wrapper {
    padding-bottom: 0 !important;
}
/* remove overflow hidden */
div#block-yui_3_17_2_1_1584647118148_10720 .image-block-wrapper {
    overflow: visible !important;
}
/* overlap image */
div#block-yui_3_17_2_1_1584647118148_10720 img {
    width: auto !important;
    bottom: -20% !important;
    top: unset !important;
    right: 0;
    z-index: 999;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

Okay I must be going crazy now. That code no longer works. It's now stuck behind again. Is there a change I broke or something else I have to do?

Here's the code I'm using (I re-added the image so the block-yui changed):

/* remove section bottom padding */
[data-section-id="5ddd4eb4522cc3312c5226a6"] .content-wrapper {
    padding-bottom: 0 !important;
}
/* remove overflow hidden */
div#block-yui_3_17_2_1_1587085802684_25650 .image-block-wrapper {
    overflow: visible !important;
}
/* overlap image */
div#block-yui_3_17_2_1_1587085802684_25650 img {
    width: auto !important;
    bottom: -20% !important;
    top: unset !important;
    right: 0;
    z-index: 999;
}

 

Link to comment
  • 2 months later...

I used the following to get an overlap feature for an image card block in one section to bleed over the edge into the section below it.  You just need to change the #block-yui IDs in each.  Mine was acting a little funny on smaller widths so I added the screen width settings too.  I had this particular section at the "custom" height of 10 (the smallest it'll go), so you may have to tweak the top: 10vh number in the first set of CSS if you have a taller section.

@media only screen and (min-width: 800px){div#block-yui_3_17_2_1_1593439438559_11782 {
    width: auto !important;
    bottom: -20% !important;
    top: 10vh !important;
    right: 0;
    z-index: 999;
  }}

@media only screen and (max-width: 799px){div#block-yui_3_17_2_1_1593439438559_11782 {
    width: auto !important;
    z-index: 999;
padding-top: 20px !important;
  }
.sqs-block-image .design-layout-poster .image-card {
    width: 87%;
  padding-top: 30px !important;
}
}

 

Screen Shot 2020-06-29 at 1.25.33 PM.png

Edited by 44degreesnorth
attached image
Link to comment
  • 3 months later...
  • 3 weeks later...
  • 1 year later...
On 3/20/2022 at 10:28 AM, MMEbyKiandraTrickett said:

I've done this for a 7.0 website and the mobile view is absolutely terrible. Any solutions anyone knows of? 

@tuanphan?

https://allpilatestas.squarespace.com/

password: hello

Which section are you referring to?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...
10 hours ago, freshlypressed said:

Hi does anyone know if it's possible to overlap the image of my hero banner over the section below? 

@pentool makes a great point, adjusting the background to include the stripe at the bottom works well.

An alternative is to use a rectangular shape block, stretch it to the left and right edges and use the fill screen option on the section to allow you to join the shape to the bottom of the section.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hi @freshlypressed, you can use SquareKicker for this. Great when you want to keep your background banner images or videos with background image effects etc and then overlap a block over another section.  See instructions below.

In Fluid Engine:

1.) Make the Section Content align to the bottom with Fluid Engine first so you do not have to move it past the Section padding or remove the Section "Fill Screen" to remove the section padding. 

2.) Next use the SquareKicker Section Tool to adjust the "Layer Level" to 1. You will need this to adjust the z-index of the section to make sure the image does not get cropped when you move it down.

3.) Lastly move the image block to the bottom of the section and use the SquareKicker position tool to move the image block down. SquareKicker > Position > Vertical.  Note: this is automatically set to 0 on mobile devices so you don't need to set a device specific code, but you can micro manage this per devices with SquareKicker.

Once you are done, if you don't need to make anymore changes you can cancel SquareKicker and all your saved custom code changes will save forever without an on going subscription. 

Here is a video showing the Position tool in use.

image.thumb.png.6d321c1004bba307640e34bd6872e201.png

SquareKicker

Hi, I'm Nick, CEO & Co-Founder at squarekicker.com.  Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. 

Design Extension  ●  Templates  ●  News  ●  Inspiration  ●  Tutorials  ●  Resources

 

Link to comment
  • 1 month later...

Hello @tuanphan!

I have tried everything in this thread with a similar issue. I want the fruit to overlap sections like the below image, but they just go behind the section no matter what I try. From my research it seems the z-index is what usually makes elements come to the front, but nothing is working. Please help!

image.thumb.png.75b0bd6d84846b6e5ff9675a7aa5e280.png

Please see my site below:

https://violet-impala-rgjr.squarespace.com/

password: celebrate101

Link to comment
On 5/4/2023 at 1:48 PM, elizablake said:

Hello @tuanphan!

I have tried everything in this thread with a similar issue. I want the fruit to overlap sections like the below image, but they just go behind the section no matter what I try. From my research it seems the z-index is what usually makes elements come to the front, but nothing is working. Please help!

image.thumb.png.75b0bd6d84846b6e5ff9675a7aa5e280.png

Please see my site below:

https://violet-impala-rgjr.squarespace.com/

password: celebrate101

Don't remove any code in your current code

Add this to Design > Custom CSS

[data-section-id="6453213e2f1c110bfd8d7c4b"] {
    z-index: 9 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

@lucyfrances Your site is set to private, can you add and share a site wide password?

Typically you will have more luck overlapping going down the page rather than up, so if you can place that text block at the bottom of the previous section and push it down to overlap.

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 5 weeks later...
On 3/15/2023 at 2:31 PM, pentool said:

Are you sure you guys not overthinking this a little? Does it HAVE TO BE two sections? Why? You can totally fake it with a single section make it look like two. Works on mobile, too.

Description is on the page. PW: Accordion

https://elephant-apricot-d89n.squarespace.com/overlap

Screen Shot 2023-03-15 at 2.30.45 AM.png

Hey @pentool I've tried your method but I get a line from the section background between the shape I add as a fake section and the following section. See screenshot . . . how do I avoid that?

Thanks!

 

 

Screen Shot 2023-08-24 at 8.33.39 pm.png

Edited by Callan
to follow topic
Link to comment
On 8/24/2023 at 3:39 PM, Callan said:

Hey  I've tried your method but I get a line from the section background between the shape I add as a fake section and the following section. See screenshot . . . how do I avoid that?

Thanks!

 

 

Screen Shot 2023-08-24 at 8.33.39 pm.png

The site is expired. You can access this link to extend it for free, then we can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

I don't see this overlap when I view the page, do you have any custom code? Since they're different sections that you are showing overlapping that shouldn't happen unless you've got some code causing it.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 weeks later...

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.