Uniqlo Stripe Hovers

For the larger promotional boxes in the design of Uniqlo.com, they use animated stripes that reveal on hover. It’s kind of awesome, if you ask me. Perhaps because they wanted to share the awesome with as many different browsers as possible, they used an animated GIF to produce the effect. It’s fairly small at 4K, but as we know around here, it is also another HTTP request. Let’s reproduce the effect in a progressive enhancement style: less browser support but more efficient.

The HTML

We could do this with only the parent element, changing it’s background to animated stripes on :hover. However, the stripes on Uniqlo fade in, they don’t just instantly appear. Unfortunately for us, there is no such thing as background-opacity that we could transition to help us.

We could use the ::before pseudo element instead and use opacity to fade the whole thing in and out, but the support for transitions on pseudo elements is just only starting to get OK.

Just this once, let’s use an additional element to handle our special background:

<div class="product">
  <div class="product-hover"></div>

  <!-- all the product information and stuff -->
</div>

The CSS

The .product will have some padding, which essentially reveals the big thick white border where the animated stripes will appear.

.product {
  background: white;
  padding: 20px;
  position: relative;
}

Then if we absolutely position our .product-hover to each corner, the background of it will show up in that 20px padding around the product. By default, we’ll make the opacity 0 so it’s not seen.

.product-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

The Stripes

Now to create that “barber pole” animated stripe, we need to use a 45 degree linear gradient to create a repeatable square that ends up looking like stripes. Here’s the code for that.

.product-hover {
  background-size: 30px 30px;
  background-image: linear-gradient(
    45deg, 
    rgba(black, 0.1)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(black, 0.1)  50%, 
    rgba(black, 0.1)  75%, 
    transparent       75%, 
    transparent
  );  
}

There are also some diagonal stripes available at Lea Verou’s pattern gallery. The code is a bit lighter as well, but don’t allow the background to be white or transparent.

Here’s how the gradient works:

That’s all standard CSS except the “black” in the RGBa value, that’s made possible through Sass.

That 30px ✕ 30px block is perfectly repeatable and will fill the .product-hover with stripes.

Revealing the Stripes

It’s an element onto itself, so it’s very easy:

.product:hover .product-hover {
  opacity: 1;
}

That’s an instant-reveal though. To get the fade-in fade-out going, we set a CSS3 transition.

.product-hover {
  transition: opacity 0.3s ease;
}

Animating the Stripes

We need animation here (as opposed to transition), since we want the stripes to animate indefinitely.

Moving the background-position around on the .product-hover will change where our little 30px ✕ 30px box begins, and thus appear to be moving like a barber pole.

@keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 60px 30px; }
}

Then we set that animation on the element, having it move in a linear fashion (no easing) and repeat indefinitely:

.product-hover {
  animation: barberpole 0.5s linear infinite;
}

Demo

And done! Demo on CodePen:

Check out this Pen!