Home > Web Front-end > CSS Tutorial > How to Create a Left-to-Right Background Color Fill on Hover Using CSS?

How to Create a Left-to-Right Background Color Fill on Hover Using CSS?

DDD
Release: 2024-11-01 11:23:13
Original
922 people have browsed it

How to Create a Left-to-Right Background Color Fill on Hover Using CSS?

Achieving a Left-to-Right Background Color Fill on Hover Using CSS

To achieve a background color fill from left to right upon hovering over an element, employ a linear gradient and transition. Begin by configuring a linear gradient with two colors, for instance, red and blue, at the 50% mark. Then, set the gradient to be positioned to the right and double the size of the element, relative to its width and height (e.g., 200%).

When the element is hovered over, alter the background position to "left". Incorporate "transition: all 2s ease;" to apply a smooth transition.

For browsers that require vendor prefixes, consult the comments under the initial question.

Additional Customization

To create a color transition, increase the gradient width to 300% and adjust the start (e.g., 34%) and end (e.g., 65%) positions accordingly.

Example:

<code class="css">div {
  font: 22px Arial;
  display: inline-block;
  padding: 1em 2em;
  text-align: center;
  color: white;
  background: red; /* default color */

  /* Linear gradient and initial position */
  background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
  background-size: 200%;
  transition: .5s ease-out;
}
div:hover {
  background-position: left;
}</code>
Copy after login

HTML:

<code class="html"><div>Hover me</div></code>
Copy after login

The above is the detailed content of How to Create a Left-to-Right Background Color Fill on Hover Using CSS?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template