background-clip: text; is famously used to colorize text with gradients. But you can pass entire dynamic images through it. More impressively, we can smoothly animate the color property from transparent (to show the mask image) to solid on hover (covering the image), while zooming the image background out!

Reversing the Clip Priority

.text-mask {
  font-size: 8rem;
  font-weight: 900;
  color: transparent; /* Initial state: see through the text */
  background-image: url('my-photo.jpg');
  background-size: 200%;
  background-position: center;
  background-clip: text;
  -webkit-background-clip: text;
  
  transition: color 0.5s ease-out, background-size 0.5s ease-out;
}

/* Hover logic: Fill text with white, expand the image */
.text-mask-wrapper:hover .text-mask {
  color: white; /* Hides the masked image inside the letters */
  background-size: 100%; /* Show whole image */
}

When checking the Live Demo, notice how the text turns solid white while the hidden city backdrop simultaneously swells up behind it!