Search code examples
htmlcsscss-positionz-index

Make parallaxed element completely opaque

I have the following HTML structure:

<section class="mysection">
  <div class="parallax">
    <div>
       <svg></svg>
    </div>
  </div>
</section>

<section class="back">
    <div class="triangle">
        <img src="img/red-triangle-bkgrd.png">
    </div>      
</section>

This is the CSS in LESS: 

    .parallax{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

  section.back {
    .triangle {
        position: relative;
        img {
            position: absolute;
            right:0;
            top: 0;     
        }
    }
  }

Before using parallax on the parallax, back just sits immediately below the bottom border of mysection.

When I scale parallax by 1.11111111, the parallax uses 100% width of the viewport. However, back does not sits right beneath the parallax anymore. Instead, it overlaps with the parallax area. Here is a picture of a real-life situation:

enter image description here

How can I make back in the overlap area invisible? Put it another way, how can I make svg or its containers completely opaque without showing the overlaped image beneath it?

I tried 'opacity:1` on svg and its containers, but it is not working.

To be more detailed, I use a tool called ScrollMagic for this work if this is relevant.

Solution

  • You can set the stacking order using z-index. Try setting the following:

    .mysection {
  position: relative;
  z-index: 1;
}

    This should ensure that whatever's in your .mysection (such as the svg/map) passes over whatever intersects (assuming you don't apply a greater z-index to the other elements).