0

I would like to achieve the effect as per the attached image (via https://thierrychopain.com).

I have tried using mix-blend-mode: difference; (and other variants) but obviously that just inverts the background image too, whereas I would simply like to change the font colour as the background changes. I cannot immediately see how else this could be done via CSS. After inspecting the website itself (https://thierrychopain.com), I still can't see how the designer has achieved this in CSS alone.

How can this be done?

Inversion of text colour on monochrome background

2 Answers2

1

In looking at the page, the designer pulls a visual trick on you. There's actually two separate copies of that text. One inside the image display block and one outside. The one outside lies beneath it, and is black. The one inside is white, but overflow:hidden on the image container constrains it.

By carefully aligning the text to where it gets cut off, you see that effect.

Here's a quick example to demonstrate the technique. (Note: Since it's just a demo I didn't make it play well on mobile.)

JS Bin Example: https://jsbin.com/loxulil/3/edit?output

EPB
  • 3,939
  • 1
  • 24
  • 26
0

If you know the width of the images before hand, You can try something like this.

The first background to color the text inside the image, and the second is for the rest of the text.

div {
  
  /* to center text vertically and horizontally */
  display: flex;
  
  background: url(https://picsum.photos/200/300) center no-repeat;  
  padding: 50px;
}

h1{

/* to center text vertically and horizontally */
  margin: auto;
  
  background: linear-gradient(white, white) center/200px 100% no-repeat, black;
  -webkit-background-clip: text;
  color: transparent;
}
<div>
  <h1>I'm not a Header Title</h1>
</div>

re-run the snippet for a different image.

Rainbow
  • 6,772
  • 3
  • 11
  • 28