CODEWITHSUNDEEP
cssmix-blend-mode
user18249902
user18249902

Reputation:

mix-blend-mode sticky position

I'm trying to get my Hello World to be affected by the red background color as it slides behind, how can this be achieved, if possible at all? The text should change color as the below element slide behind the text

body {
  height: 150vh;
  background: #000;
}

h1 {
  mix-blend-mode: difference;
  color: rgb(255, 255, 255);
  z-index: 2;
  
}

.top {
  position: sticky;
  top: 0;
  height: 50vh;
z-index: 1;

}

.bottom {
  background: rgb(232, 12, 12);
  position: sticky;
  top: 0;
  height: 50vh;
  position: relative;
  isolation: isolate;
}
<div>
  <div class="top">
    <h1>Hello World</h1>
  </div>
  <div class="bottom"></div>
</div>

Upvotes: 2

Views: 735

Answers (1)

Arash Seifi
Arash Seifi

Reputation: 505

for the mix-blend-mode to work apply it like this

body {
            height: 150vh;
            background: #000;
          }
          
          h1 {
        
            color: rgb(255, 255, 255);
            z-index: 2;
            
          }
          
          .top {
            mix-blend-mode: difference;
            position: sticky;
            top: 0;
            height: 50vh;
          z-index: 1;
          
          }
          
          .bottom {
            background: rgb(232, 12, 12);
            position: sticky;
            top: 0;
            height: 50vh;
            position: relative;
            isolation: isolate;
          }
<div>
        <div class="top">
          <h1>Hello World</h1>
        </div>
        <div class="bottom"></div>
      </div>

some one in your comment section also said the same thing - Dai

Upvotes: 2

Related Questions