Edit in JSFiddle

.image-container {
  position: relative;
  height: 333px;
  background-repeat: no-repeat;
  background-image: url("https://images.pexels.com/photos/544917/pexels-photo-544917.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
}

.image-two {
  background-image: url("https://images.pexels.com/photos/62693/pexels-photo-62693.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=333");
}

.text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 60px;
  font-weight: bolder;
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: invert(1) grayscale(1) contrast(9);
}
<div class="image-container image-two">
  <span class="text">Test text</span>
</div>
const imageContainer = document.querySelector('.image-container');

setInterval(()=>{
  imageContainer.classList.toggle('image-two');
}, 2000)