I am making a website and I have a problem with line-gradient on an arrow: I have two arrows (one in each direction) with a line-gradient. If I hover on the arrow the gradient moves. This works perfect on the arrow looking to left, but not on the arrow looking to right. There happens nothing. Here is the css code of the working arrow:
.AnimTextGradient1 {
background: -webkit-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -webkit-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -moz-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -ms-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -o-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: 0.5s;
background-size: 200% auto;
} .AnimTextGradient1:hover {background-position: right center;}
For the other arrow I switched every "right" to "left" Here is a JSFiddle of it: https://jsfiddle.net/2eqt694v/ Does someone know how to solve this problem?
This is likely because the background is already left-aligned. Unless you specify a background-position; it's default value will be top left. As your gradient does not
change in the y-axis there is no discernable difference when you alter to
background-position: left center;
in your code. I would recommend either anchor the background to another value, center center/right center in .AnimTextGradient2 or add a gradient in the y-axis.