Mask text with a layer

Question

I am trying to do something similar to this

from https://ubac-store.com/ , I am trying to make some combinations width CSS with mix-blend-mode: difference; and filter: invert(100%); but honestly I don´t receive the expected result, it seems like in ubac-store are making some mask and they have diferents layers with the same text in diferents colors, but I don´t find the way, anybody can give any clue to get my objetive?

Thanks in advance

Chris W. · Answer 1 · 2022-04-20T22:17:05.980

Your most likely culprit is missing a background-color on whatever the containing element (or document) that mix-blend-mode relies on to make the effect.

See the example below, we use the difference mode that will invert the color of the background accordingly. So for example the black text turns white over the image, while red turns the inverted equivalent of light blue. Hope this helps, cheers.

section {
  height: 100vh;
  width: 100%;
  position: relative;
  outline: #0f0 2px dashed;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

#img1, #img2 {
  position: absolute;
  height: 45%;
  width: 45%;
  background: url(https://picsum.photos/id/237/200/300) no-repeat center / cover;
}

#img2 {
  bottom: 0;
  right: 0;
}

#txt1, #txt2 {
  font-size: 3rem;
  color: #fff;
  margin: 2rem 1rem;
  mix-blend-mode: difference;
}

#txt2 {
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
  color: red;
}

<section>

  <div id="img1"></div>
  <div id="img2"></div>
  
  <p id="txt1">SOME TEXT WORDS</p>
  <p id="txt2">EVEN MORE WORDS</p>

</section>

Mask text with a layer

1 Answers1