Плавная смена css градиента у текста при наведении

Рейтинг: 0Ответов: 1Опубликовано: 26.07.2023

.text_number {
  position: relative;
  z-index: 1;
  transition: all 1s;
  background: linear-gradient(45deg, black, white 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text_number::before {
  background: black;
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 1s;
}

.text_number:hover::before {
  opacity: 1;
}
<span class="text_number">8 900 000 00 00</span>

Хочу сделать так, что бы при наведении на номер градиент превращался в полностью белый цвет

Однако стоит применить -webkit-background-clip: text к .text_number::before как всё перестает работать

Ответы

▲ 2

Добавьте изменение background при наведении на .text_number:

.text_number {
  position: relative;
  z-index: 1;
  transition: all 1s;
  background: linear-gradient(45deg, black, white 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text_number::before {
  background: black;
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 1s;
}

.text_number:hover {
  background: white;
  -webkit-background-clip: text;
}

.text_number:hover::before {
  opacity: 1;
}
<span class="text_number">8 900 000 00 00</span>