I have an element that, when hovered, changes the background color gradually from left to right. However, I wanted to change not only the background color, but also the color of the text, exactly at the same time/pace. How can I achieve this?
This is my relevant CSS:
.left-to-right {
color: white;
background-size: 200% 100%;
background-image: linear-gradient(to right, #011228 50%, #FF7800 50%);
transition: background-position 1s;
}
.left-to-right:hover {
background-position: -100% 0;
color: #011228;
}
One posibility is to use background-clip: text. But unfortunately the support is very poor.