Как задать тексту фоновый рисунок с помощью CSS-свойства background-clip

Простой пример, как можно задать для текста фоновое изображение с помощью CSS-свойства background-clip.

HTML – проще некуда:

<h3 class="mask">Home</h3>

CSS – максимально упрощенный, чтобы было понятно, что нужно именно для данного эффекта:

.mask {
  color: transparent;
  background-color: transparent;
  background-image: url('https://denis-creative.com/wp-content/uploads/2019/01/bg-title-meaning.png');
  -webkit-background-clip: text;
}

Пример текста с фоновым рисунком:

See the Pen CSS3 Text Mask by Denis (@deniscreative) on CodePen.0

Второй вариант фона для текста с небольшой анимацией при наведении на текст, анимация создана с помощью изменения размера фонового рисунка.

See the Pen CSS3 Text Mask by Denis (@deniscreative) on CodePen.0