как изменить цвет фона текста снизу вверх

Question

Я пытаюсь изменить цвет текста снизу вверх или вверх при наведении.

.box {
    width: 200px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, green 50%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

<div class="box">Text</div>

приведенный выше код заставляет поле менять цвет вместо текста. Что я могу сделать, чтобы сделать цвет текста вместо поля.

Answer 1

Эффект можно получить, используя оверлей (псевдоэлемент before) с фоном, и mix-blend-mode: screen:

.box {
  position: relative;
  width: 200px;
  height: 100px;
  font-size: 5em;
  background: white;
}

.box::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, red 50%, green 50%);
  transition: background-position 1s;
  content: '';
  pointer-events: none;
  mix-blend-mode: screen;
}

.box:hover::before {
  background-position: 0 -100%;
}

<div class="box">Text</div>

Answer 2

Вы должны использовать Фоновый клип :

.box {
  width: 200px;
  height: 100px;
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, red 50%, green 50%);
  -webkit-transition: background-position 3s;
  -moz-transition: background-position 3s;
  transition: background-position 3s;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 50pt;
}

.box:hover {
  background-position: 0 -100%;
}

<div class="box">Text</div>

Примечание: Я увеличил размер шрифта и время до 3 секунд, чтобы хорошо видеть эффект.