Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Sections with opacity gradient


Tonmeister

Question

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

16 answers to this question

Recommended Posts

  • 0

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:

594224854_Screenshot2020-07-12at18_18_20.thumb.png.8b7703006817cc9b5b049fcb625c5a58.png

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
  • 0

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.

image.png

Edited by rwp
Link to comment
  • 0

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

Screenshot 2020-07-20 at 21.55.37.png

Link to comment
  • 0

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 by rwp
Link to comment
  • 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):

875813642_Screenshot2020-07-24at13_39_30.thumb.png.5936774553b2005ccb792d521dee2f5e.png

Perhaps there is a small typo in the code?

Thank you again. This saves me.

Best, Gregor

 

Link to comment
  • 0

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.

 

Link to comment
  • 0

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:1755770626_Screenshot2020-07-24at18_28_33.thumb.png.565ff7cf1b8f3ace99233d55c46227db.png

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
  • 0

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 by rwp
Link to comment
  • 0

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 by Tonmeister
Link to comment
  • 0
.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.

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