Is it possible to make this effect on text using CSS?

Question

css

Good day.
Please tell me if it is possible to partially change the color of text or SVG images when overlaying them on another object (for example, a picture).

Answer 1

https://codepen.io/Anna_Batura/pen/LzOqPY

Answer 2

Just put a background gradient under the text. All.
https://jsfiddle.net/5av1sxcw/

<div class="wrap">
<img src="http://putevoditel-altai.ru/uploads/photos/previews/834_enshhs-bcb.jpg" alt="">
<div class="text">text</div>
</div>

.wrap {
  position: relative;
}
img {
  margin: 50px;
}
.text {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 75px;
  height: 75px;
  background: #999 linear-gradient(to right, #999 0, #999 50px, #fff 51px, #fff 100%) no-repeat left bottom / 100% 25px;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -o-background-clip: text;
  background-clip: text;
  color: transparent;
}

Answer 3

maybe there is something in the filters, but this is akin to experiments. Capital K is buggy even on pictures :)

Answer 4

only 1 transition is possible
https://jsfiddle.net/egsq6j59/