Tonmeister Posted June 30, 2020 Share Posted June 30, 2020 Site URL: https://wisteria-panda-z2eg.squarespace.com/home Dear All, I have been researching for days with no success. is it possible to have sections with „soft edges“? By that I mean, if I have a section with black background and it overlaps with a section with an image background, can the edge of the black section have something like a transparency or opacity gradient? I want it to look like the image and black blend / morph into each other. To complicate things further, the image also has a parallax. Check it out here: https://wisteria-panda-z2eg.squarespace.com/home pw: rotorsound The section with the instagram block should have the soft edge at the top. Thank You 🙏🙏 Link to comment
Tonmeister Posted July 12, 2020 Author Share Posted July 12, 2020 Ok, so I managed to do this by adding an empty text block ("block-yui_3_17_2_1_1593957055689_2490") on the hero image section and adding this code: #block-yui_3_17_2_1_1593957055689_2490 {color: #000000; background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)); z-index:10!important; padding-bottom:10em!important; } Looks like this now: I am very happy with this look and would like to use it on the rest of the landing page. But my next image section is a gallery section which doesn't allow more blocks on it, so I cannot add the opacity gradient. Or can I? @tuanphan: Would you be able to take a look? Many thanks in advance!! 🙂 Gregor Link to comment
rwp Posted July 12, 2020 Share Posted July 12, 2020 (edited) I did this in red just to make it stand out. I made a new section, below your other section and then added some CSS like this: #NEWSECTION { background: linear-gradient(to bottom, rgb(255, 0, 0), rgba(0,0,0,0)); padding-top: 10em !important; } #GALLERYSECTION { margin-top: -10em; z-index: -1; } Because you are adding a new section via squarespace, you may also need to tweak some of the section defaults. It might have a min height or background that messes this up. You can use [data section id] to target the specific sections. Edited July 12, 2020 by rwp Tonmeister 1 Link to comment
Tonmeister Posted July 20, 2020 Author Share Posted July 20, 2020 Thank you RWP! And sorry for the late reply. I was just able to try this out and it almost worked. If I work with Section {background: linear-gradient...} the gradient will be hidden by something, which I can't seem to figure out. However what works is if I turn the content-wrapper into a gradient: [data-section-id="5f15ecd7924ec47847368146"] .content-wrapper {width:100%!important; background: linear-gradient(to bottom, rgb(255, 0, 0), rgba(0,0,0,0)); z-index: 1;} [data-section-id="5f08c4671be2450647247798"] {margin-top: -2em!important; z-index: 0; } Two problems arise: 1. Content-wrapper is not full-bleed 2. There is no clear way of which value to work with for the margin-top of the gallerysection. -2em works in one view, but if I go fullscreen, the section moves and never quite aligns... Any thoughts? Thx again!! Gregor Link to comment
rwp Posted July 20, 2020 Share Posted July 20, 2020 (edited) Try this out..... Edit.... scratch this..... working on a proper fix.... Edited July 21, 2020 by rwp Link to comment
rwp Posted July 21, 2020 Share Posted July 21, 2020 (edited) OK. So hours later...... I figured out the issue. So delete that section. Putting a section in via the editor add all sorts of CSS and other dimensional settings. So we need to use a little jquery to make our own section: This can go in the page code injection. $(document).ready(function() { $('[data-section-id="5f08c4147f94412caf4dea3a"]').after("<section class='fadesection'></section>"); }); And some CSS [data-section-id="5f08c4671be2450647247798"] { margin-top: -10vh; z-index: 0; } .fadesection { min-height: 10vh; background: linear-gradient(to bottom,#000,rgba(0,0,0,0)); z-index: 1; position: relative; padding-top: 10vh; } To make everything even, I would recommend CHANGING your current CSS for the upper fade to this: #block-yui_3_17_2_1_1593957055689_2490 { color: #000; background: linear-gradient(to top,#000,rgba(0,0,0,0)); z-index: 10 !important; padding-bottom: 10vh !important; min-height: 10vh !important; } You will need to REMOVE the old CSS from above: [data-section-id="5f15ecd7924ec47847368146"] .content-wrapper {width:100%!important; background: linear-gradient(to bottom, rgb(255, 0, 0), rgba(0,0,0,0)); z-index: 1;} [data-section-id="5f08c4671be2450647247798"] {margin-top: -2em!important; z-index: 0; } Edited July 21, 2020 by rwp Tonmeister 1 Link to comment
Tonmeister Posted July 24, 2020 Author Share Posted July 24, 2020 Thank you rwp. Thanks for putting in so much work!! I inserted you codes and there seems to be a slight problem with the jquery. For now, I made the section white, just to be able to see it better: .fadesection { min-height: 10vh; background: #FFFFFF; //linear-gradient(to bottom,#000,rgba(0,0,0,0)); z-index: 99; position: relative; padding-top: 10vh; } That's the only thing I changed. However, the section ends up at the top of the page (the remaining bit of jquery code "); });" is visible): Perhaps there is a small typo in the code? Thank you again. This saves me. Best, Gregor Link to comment
rwp Posted July 24, 2020 Share Posted July 24, 2020 I think you forgot the <script> </script> tags around the jquery code. <script> $(document).ready(function() { $('[data-section-id="5f08c4147f94412caf4dea3a"]').after("<section class='fadesection'></section>"); }); </script> Also, if this gives you issues, you have your jquery script (the one that allows jquery to work) in the site wide injection footer, move that to the header. Tonmeister 1 Link to comment
Tonmeister Posted July 24, 2020 Author Share Posted July 24, 2020 Thank you!! Yes that did it! perfect. Now the last snippet: I copied your code to create a second section ".fadesection2". for the lower part of the gallery, in order to fade back to black, then I#m done. Now it somehow appears as two gradient sections: Do you know how this happens? Is there a trick on how to align this .fadesection2 so it exactly lines up with the bottom of the image gallery? moving it up by top-margin or position brings up different results for different screen sizes. All the best, Gregor Link to comment
rwp Posted July 24, 2020 Share Posted July 24, 2020 (edited) That's pretty funny. Squarespace used the same data section ID for multiple elements.... so it put the new section in twice. In both of the scripts, add in section.page-section before the [data-section..... Even though the first one works, might as well update it. This way it will only target sections, with the class page-section, and the matching data-section-id So they both look like this with the appropriate numbers: <script> $(document).ready(function() { $('section.page-section[data-section-id="5f08c4147f94412caf4dea3a"]').after("<section class='fadesection'></section>"); }); </script> It looks like you will need to update the CSS to match.... seems like this works: section.page-section[data-section-id="5f08c4671be2450647247798"] { margin-top: -14vh; z-index: 0; margin-bottom: -30vh; } .fadesection2 { min-height: 10vh; padding-top: 4vh; background: linear-gradient(to top,#fff,rgba(0,0,0,0)); z-index: 0; position: relative; } Edited July 24, 2020 by rwp Tonmeister 1 Link to comment
rwp Posted July 24, 2020 Share Posted July 24, 2020 Check the post above for some CSS changes, you might have looked at it before I edited the post..... Tonmeister 1 Link to comment
Tonmeister Posted July 24, 2020 Author Share Posted July 24, 2020 (edited) I checked them, thanks! and yes the jquery changes did the trick. As for aligning .fadesection2, I moved it up by a combination of top-margin and position: .fadesection2 { position: relative; top:-10.4em; margin-top: -12vh; } (The section is currently all grey with 0.5 opacity in order to see it better) This makes the lower end of the section pretty much align with the bottom of the gallery for me. However if I use vh valuse for position, then I get different results in different window sizes. Is there a precise way to do it? Best, G Edited July 24, 2020 by Tonmeister Link to comment
rwp Posted July 24, 2020 Share Posted July 24, 2020 .fadesection2 { min-height: 10vh; background: #fff; opacity: .5; z-index: 99; position: relative; bottom: 10vh; } <script> $(document).ready(function() { $('section.page-section[data-section-id="5f08c4671be2450647247798"] .gallery-fullscreen-slideshow-wrapper').after("<section class='fadesection2'></section>"); }); </script> Try this..... just for fadesection2 This will put it in a different spot, so we can use the height and bottom to align it. Tonmeister 1 Link to comment
Tonmeister Posted July 24, 2020 Author Share Posted July 24, 2020 Epic!! Thank you so much. I learnt a lot 🥳 rwp 1 Link to comment
rwp Posted July 24, 2020 Share Posted July 24, 2020 Just now, Tonmeister said: Epic!! Thank you so much. I learnt a lot 🥳 Me too... LOL Link to comment
anna6 Posted August 12, 2020 Share Posted August 12, 2020 Hi there, I am hoping you can help me with this. I want to be able to add a gradient overlay (small gradient at top through to transparent) on all images within the gallery on the 'work' page. Here is my site: https://fuchsia-dalmatian-ddp9.squarespace.com/config/design/custom-css PW: cpFrWs5RlXoNaYs9nd3T Hope you can help me. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment