Invert colors of title over an image

Question

Here is my current HTML:

.titleText {
  font-family: Hacked;
  font-size: 8rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
}

.titleContainer {
  position: relative;
}

body {
  margin: 0;
}

<!DOCTYPE html>
<div class="titleContainer">
  <img src="assets/ethan.png">
  <h1 class="titleText">Ethan Brand</h1>
</div>

I want the text over the image to be the "opposite of transparent", inversing the color behind each pixel of text. I found this: How can I invert color using CSS? but that changes all of the text, not taking the inverse of each pixel.

Thanks!

Ori Drori · Accepted Answer · 2019-10-09T18:24:38.253

0

Use mix-blend-mode: difference; with color: white on the text:

.titleText {
  font-family: Hacked;
  font-size: 8rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
  mix-blend-mode: difference;
  color: white;
  margin: 0;
}

.titleContainer {
  position: relative;
}

body {
  margin: 0;
}

<div class="titleContainer">
  <img src="https://picsum.photos/800/400">
  <h1 class="titleText">Ethan Brand</h1>
</div>

edited Oct 09 '19 at 18:24

answered Oct 09 '19 at 16:49

Ori Drori

183,571
29
224
209

1

Just for the sake of a fuller answer here is a link to documentation of `mix-blend-mode` on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode – Ivar Oct 09 '19 at 16:55

Invert colors of title over an image

1 Answers1