Filling Background Color Left to Right Using CSS

In CSS, you can create captivating hover effects by utilizing linear gradients and animating background positioning. This approach enables you to fill the background of an element from left to right with a new color upon hover.

Linear Gradient and Background Size

The key is to use a linear gradient background consisting of two colors and set the background size to be twice the element's width. This allows you to create a seamless transition between the two colors.

Background Positioning and Animation

Initially, position the background to the right to start with the leftmost color. Upon hover, change the background position to the left to reveal the rightmost color. To make the transition gradual, add the transition:all 2s ease; property.

Code Example

div {
    background: linear-gradient(to left, red 50%, blue 50%) right;
    background-size: 200% 100%;
    transition:all 2s ease;
}
div:hover {
    background-position: left;
}

Customizing the Transition

To control the starting and ending points of the transition, adjust the percentages in the linear gradient. For instance, here's a configuration that transitions from 34% to 65% of the element's width:

background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;

By implementing this technique, you can effortlessly create elegant and eye-catching hover effects that enhance the user experience of your web applications and enhance your designs' overall visual appeal.