Change background from bottom to top on hover

Question

How I can change the background-color on a:hover using a transition from the bottom to the top with a duration of 0.3s?

<ul>
  <li><a></a></li>
  <li><a></a></li>
  <li><a></a></li>
</ul>

Is that possible?

Thanks

Solution

There is no way to (generically) apply a transition direction in CSS. However, we can work around that limitation by using a pseudo element (or other method like how this example uses gradients).

By using a pseudo element, which initially has a visible height of 0, we can transition the height from and to a desired direction when the link is hovered. It's best to use transform: scale for performance reasons, which means that we need to set our transform-origin to bottom center in this case to make sure it goes from bottom to top.

This approach is probably the most general, working with non-solid backgrounds and such, but does require a pseudo element or child element.

The CSS for that approach would be:

li {
    background: red;
}
a {
    position: relative;
    z-index: 1;
}
a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom center;
    background: blue;
    z-index: -1;
    transition: transform 0.3s;
}
a:hover::after {
    transform: scaleY(1);
}

Demo

Comments

[Patrice Poliquin]

The pseudo element :after did worked for me with your DEMO. Thx

[shellscape]

Perhaps the first line in the answer is now false simply because of browser improvements, but this codepen example proves that it's false to say that there's no way to apply a transition direction: codepen.io/brandon4117/pen/ihIgE

[Zach Saucier]

@shellscape No, the statement is still true. You can change the transform origin and transition an element in that way using transforms, but you cannot apply a transition direction by itself. For example, you cannot transition the opacity of an element from left to right without faking it (which is what your example does by using gradients)

[Zach Saucier]

If you replace that blue background with an image, you will see my point. It only works because the background color is solid using that method