Animated Background Stripes That Transition on Hover

How to use CSS background-size attributes to create cool background stripes? This article will share a case that demonstrates how to achieve visual effects of background stripes transitions when mouse over with CSS gradients, blend modes, and background-size properties.

Usually, we use background-size: cover to make the background image fill the entire element. But this case requires more advanced background size control: background stripes that transition when the mouse hovers. The effect is as follows (please hover your mouse over the following area):

(The dynamic effect demonstration should be inserted here, which is consistent with the original text)

The key to achieving this effect is to use the gradient and blending modes ingeniously. Let's start with a simple HTML structure:

<div></div>

Initial CSS Style:

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

Create background stripes

We can use CSS linear gradient to create stripes. Due to uneven width of the stripes and the need for transition effects, we cannot directly use repeat gradients. Here, we simulate five stripes by superimposing five linear gradient backgrounds and positioning them to the upper right corner of the container:

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

To simplify the code, we can use custom properties:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

--gt means gradient, and --n controls the vertical offset of the stripe. Currently the linear gradient is set to pure black, which is for subsequent masking and blending effects. To prevent the background from tiling repeatedly, we need to set background-repeat: no-repeat;:

div {
  /* ... */
  background-repeat: no-repeat;
}

Adjust the size and spacing of stripes

The current stripes overlap and are almost impossible to see. We need to use the background-size attribute to set the width and height of the stripe. The background-size attribute supports double-value syntax, and we can set the width and height respectively. The following code sets the width of each stripe, using the default value of height: auto

div {
  /* ... */
  background-size: 60%, 90%, 70%, 40%, 10%;
}

Since the height is

, the stripes will cover each other. We need to use double value syntax and set the same height: auto

div {
  /* ... */
  background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n);
}

To add spacing between stripes, we can slightly reduce the height of each stripe:

div {
  --h: calc(var(--n) - 5px);
  /* ... */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

Mask and Blending Mode

Change the background color to white:

div {
  /* ... */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* ... */
}

To achieve masking and blending effects, we wrap

in a parent container and add a new one: <div> <code><div> Layout with CSS Grid: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><section> &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; </section></pre><div class="contentsignin">Copy after login</div></div> <p> </p>Apply gradient colors on the first <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">section { display: grid; align-items: center; justify-items: center; width: 500px; height: 500px; } section &gt; div { width: inherit; height: inherit; grid-area: 1 / 1; }</pre><div class="contentsignin">Copy after login</div></div>, and apply the previous stripe style on the second <p> and implement screen blending mode using <code><div>: <code><div> <code>mix-blend-mode: screen; Mouse hover effect

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  /* ... previous styles ... */
  mix-blend-mode: screen;
}

Finally, we add a mouseover effect to expand the stripe width to the full width of the container:

The final effect is shown at the beginning. Please note that for a better user experience, it is recommended to consider reducing the settings for sports effects to meet the preferences of different users.

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

This method is good maintainability and customization, and you can easily change the height, color and orientation of the stripes, etc.

I hope this case can help you better understand and apply the CSS attributes. If you have other implementation methods, please share it in the comment section! background-size