Плавная смена css градиента у текста при наведении
.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
как всё перестает работать
Источник: Stack Overflow на русском