0

I'm using the following code from Animating a CSS gradient background on the hover event which is amazing. However, I'd like the gradient to be left to right.

.gradient {
    background: -webkit-linear-gradient(lightgray,white);
    background: -moz-linear-gradient(lightgray,white);
    background: -o-linear-gradient(lightgray,white);
    background: linear-gradient(lightgray,white);
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    -moz-background-size: 1px 200px;
    -o-background-size: 1px 200px;
    -webkit-background-size: 1px 200px;
    background-size: 1px 200px;
    cursor: pointer;
}

.gradient:Hover {
    background-position: 100px;
}

I tried adding left and replacing background with background-image as discussed here: http://www.webdirections.org/blog/css3-linear-gradients/

.gradient {
    background: -webkit-linear-gradient(left, lightgray,white);
    background: -moz-linear-gradient(left, lightgray,white);
    background: -o-linear-gradient(left, lightgray,white);
    background: linear-gradient(left, lightgray,white);
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    -moz-background-size: 1px 200px;
    -o-background-size: 1px 200px;
    -webkit-background-size: 1px 200px;
    background-size: 1px 200px;
    cursor: pointer;
}

.gradient:Hover {
    background-position: 100px;
}

Still no dice.

Improve this question

1 Answer 1

Reset to default
1

Your problem is with the background size, if I understand ok what you are trying has the wrong dimensions

.gradient {
    background: -webkit-linear-gradient(left, lightgray,white);
    background: -moz-linear-gradient(left, lightgray,white);
    background: -o-linear-gradient(left, lightgray,white);
    background: linear-gradient(left, lightgray,white);
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    -moz-background-size: 200px 1px;
    -o-background-size: 200px 1px;
    -webkit-background-size: 200px 1px;
    background-size: 200px 1px;
    cursor: pointer;
}

demo

Just thinking about it, the dimensions are predefined, so your class is not reusable. You can make it resolution independent, and the way it works is more easily understood. Just change the background sixe to

    background-size: 200% 100%;

well, the y dimension is not relevant, but setting it to 100% is clearer. and the hover to 

.gradient:hover {
    background-position: 100%;
}

updated demo with 2 sizes

Improve this answer
1
  • 1
    Nice that it helped you. I have added a better solution.
    – vals
    Commented Jun 1, 2013 at 7:31