Stripe hover blur animation

index.html

<div id="customer-logos">
  <a href="" class="customer-logo-link">
    <span class="button">See our customers</span>
    <ul class="list">
			<li><img alt="kickstarter" src="https://dl.dropboxusercontent.com/u/81135676/kickstarter.svg">
			</li><li><img alt="twitter" src="https://dl.dropboxusercontent.com/u/81135676/twitter.svg">
			</li><li><img alt="instacart" src="https://dl.dropboxusercontent.com/u/81135676/instacart.svg">
			</li><li><img alt="pinterest" src="https://dl.dropboxusercontent.com/u/81135676/pinterest.svg">
			</li><li><img alt="lyft" src="https://dl.dropboxusercontent.com/u/81135676/lyft.svg">
			</li><li><img alt="shopify" src="https://dl.dropboxusercontent.com/u/81135676/shopify.svg">
			</li><li><img alt="opentable" src="https://dl.dropboxusercontent.com/u/81135676/opentable.svg">
			</li><li><img alt="slack" src="https://dl.dropboxusercontent.com/u/81135676/slack.svg">
		</li></ul>
  </a>
</div>

stripe-hover-blur-animation.markdown

Stripe hover blur animation

I was randomly looking for the Stripe Redesign and found it gorgeous! Attention for every detail, great design and UX! Here's the blur hover animation in their homepage.

A Pen by Riccardo Zanutta on CodePen.

License.

style.scss

body {
  font-family: 'Open Sans', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.customer-logo-link {
  display: block;
  padding: 30px 0;
  &:hover {
    .button {
      opacity: 1;
      transform: translate(-50%,-7px);
    }
    .list {
      opacity: .7;
      transform: scale(.95);
      filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><f…ter id="filter"><feGaussianBlur stdDeviation="10" /></filter></svg>#filter');
      filter: blur(10px);
    }
  }
}

.button {
  white-space: nowrap;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 14px;
  box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  background: #6772e5;
  text-decoration: none;
  transition: all .15s ease;
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translate(-50%,5px) scale(.95);
  opacity: 0;
  transition: .7s cubic-bezier(.19,1,.22,1);
}

.list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
  transition: 1s cubic-bezier(.19,1,.22,1);
  will-change: transform;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter');
  filter: blur(0);
  li {
    margin: 0 13px;
  }
  img {
    height: 20px;
    vertical-align: middle;
  }
}

styles

<link href="http://codepen.io/rickzanutta/pen/YXqdLj" rel="stylesheet" />