How to Create a Sliding Background-Color Transition from the Bottom with CSS?

How to Transition Background-Color from the Bottom

When attempting to change the background color of an element on hover using CSS transitions, one may encounter the issue of the background fading in rather than sliding up. While it is possible to accomplish the fading effect using the provided code, a different approach is required to achieve the desired sliding animation.

One solution involves utilizing a background image or gradient, and progressively adjusting the background position. This method creates the illusion of the background sliding up from below:

.box {
    width: 200px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, black 50%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

<div class="box"></div>

In this scenario, the element is given a background image with a linear gradient, creating the desired vertical transition. As the element is hovered over, the background position is shifted upwards, producing the effect of the background sliding up from the bottom.

The above is the detailed content of How to Create a Sliding Background-Color Transition from the Bottom with CSS?. For more information, please follow other related articles on the PHP Chinese website!