How Can I Create a Sliding Background Color Change on Hover with CSS?

Transforming Background Color with Sliding Animation

Seeking to alter the background hue of an element upon hover via CSS transitions, you face the challenge of achieving an upward scrolling effect. The current CSS code fades the background, but you desire a slick slide animation.

One approach is to harness a background image or gradient and meticulously adjust the background position. This technique enables you to slide the background from the bottom.

Consider the following example:

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

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

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

With this approach, the background initially displays red in the upper half and black in the lower half. Upon hovering, the background slides up, smoothly transitioning the red color to the entire element's height.

The above is the detailed content of How Can I Create a Sliding Background Color Change on Hover with CSS?. For more information, please follow other related articles on the PHP Chinese website!