gregbarbosa 12 Share Posted March 19, 2020 (edited) Site URL: https://www.weareteller.com I'm trying to have images overlap different sections like the attached image. Using negative margins I can get it to move outside the container, but don't know how to get it to overlap. Edited March 19, 2020 by gregbarbosa Link to post
1 tuanphan 9,537 Solution Share Posted March 19, 2020 /* 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; } gregbarbosa 1 Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
1 NickIppolito 14 Share Posted January 24 Hi @gregbarbosa, If you are still looking for a solution for this. SquareKicker recently release a new Squarespace Extension which is a no-code tool that gives you the ability to customise your site without having to write a single line of code (including the control to overlap images) using a visual builder. VIDEO: Squarespace Layout: Overlapping Blocks Between Two Sectionshttps://squarekicker.com/letsmakethis/squarespace-layout-overlapping-blocks-between-two-sections Hi, I'm Nick Ippolito, founder at squarekicker.com. SquareKicker is a No-Code Design & Animation Extension for Squarespace. With SquareKicker say goodbye to copy & paste Squarespace plugins. Customize your Squarespace website with this full control design and animation extension. Link to post
0 gregbarbosa 12 Author Share Posted April 17, 2020 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 post
0 44degreesnorth 111 Share Posted June 29, 2020 (edited) 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; } } Edited June 29, 2020 by 44degreesnorth attached image Link to post
0 olivianearle 5 Share Posted September 30, 2020 Can anyone provide an update for this because neither code works. 😞 Link to post
0 tuanphan 9,537 Share Posted October 2, 2020 On 10/1/2020 at 2:44 AM, olivianearle said: Can anyone provide an update for this because neither code works. 😞 Can you share your site url & simple mockup? We can check easier. creedon 1 Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 gogreenmsu 12 Share Posted October 21, 2020 Hello, I am having difficulty with this, too. I am looking to use a singular image that spans the height (and width) of my entire home page instead of having the image be cut off at the end of the section that it is in. https://www.takebackyourcareerpodcast.com/ password: boots135 Example: https://www.thefridayhabit.com/ (see background image is spanning all sections, so it appears). Thank you Link to post
0 tuanphan 9,537 Share Posted October 21, 2020 Which image? Can you share link to an image? Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 gogreenmsu 12 Share Posted October 29, 2020 On 10/21/2020 at 7:11 AM, tuanphan said: Which image? Can you share link to an image? Hi Tuanphan! Checking in on your thoughts, here! Link to post
Question
gregbarbosa 12
Site URL: https://www.weareteller.com
I'm trying to have images overlap different sections like the attached image.
Using negative margins I can get it to move outside the container, but don't know how to get it to overlap.
Link to post
Top Posters For This Question
3
3
2
1
Popular Days
Mar 19
2
Oct 21
2
Oct 2
1
Apr 17
1
Top Posters For This Question
tuanphan 3 posts
gogreenmsu 3 posts
gregbarbosa 2 posts
44degreesnorth 1 post
Popular Days
Mar 19 2020
2 posts
Oct 21 2020
2 posts
Oct 2 2020
1 post
Apr 17 2020
1 post
Popular Posts
tuanphan
/* remove section bottom padding */ [data-section-id="5ddd4eb4522cc3312c5226a6"] .content-wrapper { padding-bottom: 0 !important; } /* remove overflow hidden */ div#block-yui_3_17_2_1_158464711814
tuanphan
Can you share your site url & simple mockup? We can check easier.
Posted Images
10 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment