Маска для текста

Question

Как можно сделать такую маску для текста?

Answer 1

Вариант один

body {
  margin: 0;
  padding: 10px;
  background: #fff;
}

.mask {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: url("https://avatars.mds.yandex.net/get-pdb/199965/facb7a67-fd77-4b3a-b393-e1c1dac76bce/s1200");
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -o-background-clip: text;
  background-clip: text;
  font-size: 150px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  letter-spacing: -10px;
  color: transparent;
  text-stroke: 5px;
  background-position: 0 0;
  transition: background-position 2s;
  cursor: pointer;
}

.mask:hover {
  background-position: 0 50%;
}

<span>Наведи</span>
<h1 class="mask">Маска</h1>

Вариант два

body {
  margin: 0;
  padding: 10px;
  background: #fff;
}

.mask {
  overflow: hidden;
  background: url("https://avatars.mds.yandex.net/get-pdb/199965/facb7a67-fd77-4b3a-b393-e1c1dac76bce/s1200");
  background-position: 0 50%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -o-background-clip: text;
  background-clip: text;
  font-size: 150px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  letter-spacing: -10px;
  margin: 0;
  padding: 0 20px;
  cursor: pointer;
  color: transparent;
  text-shadow: 0 0 1px #fff;
  text-stroke: 5px;
  transition: text-shadow 0.5s;
}

.mask:hover {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.0);
}

<span>Наведи</span>
<h1 class="mask">Маска</h1>

БЛОГ НА HUSL

Маска для текста

Ответы (1 шт):