Sections with opacity gradient

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 🙏🙏

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

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.

Did this work for you?

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

Try this out.....

Edit.... scratch this..... working on a proper fix....

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;
}

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

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.

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

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;
}

Check the post above for some CSS changes, you might have looked at it before I edited the post.....

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

.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.

Epic!!

Thank you so much. I learnt a lot 🥳

Just now, Tonmeister said:

Epic!!

Thank you so much. I learnt a lot 🥳

Me too... LOL

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.