Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Nov 21, 2016
Embed
What would you like to do?
Stripe hover blur animation
<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

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.

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;
}
}
<link href="http://codepen.io/rickzanutta/pen/YXqdLj" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment