Skip to content

Instantly share code, notes, and snippets.

@xav76
Created October 23, 2012 19:00
Show Gist options
  • Select an option

  • Save xav76/3940841 to your computer and use it in GitHub Desktop.

Select an option

Save xav76/3940841 to your computer and use it in GitHub Desktop.
A CodePen by nvartolomei.
<div class="wrapper">
<div class="stack">
<div class="border"></div>
<div class="border"></div>
<div class="border overlay">
<img src="https://secure.gravatar.com/avatar/79045cf2a5e6cd8d939d0e6d39327133?s=140" width=140 height=140>
</div>
<div class="shadow"></div>
</div>
<div class="stack">
<div class="border"></div>
<div class="border"></div>
<div class="border overlay">
<img src="https://secure.gravatar.com/avatar/24e08a9ea84deb17ae121074d0f17125?s=140" width=140 height=140>
</div>
<div class="shadow"></div>
</div>
<div class="stack">
<div class="border"></div>
<div class="border"></div>
<div class="border overlay">
<img src="https://secure.gravatar.com/avatar/983493229bc8c8f2c0f05b7622032228?s=140" width=140 height=140>
</div>
<div class="shadow"></div>
</div>
<div class="stack">
<div class="border"></div>
<div class="border"></div>
<div class="border overlay">
<img src="http://d.pr/i/y7Ob+" width=140 height=140>
</div>
<div class="shadow"></div>
</div>
<div class="stack">
<div class="border"></div>
<div class="border"></div>
<div class="border overlay">
<img src="https://a248.e.akamai.net/assets.github.com/images/gravatars/gravatar-user-420.png" width=140 height=140>
</div>
<div class="shadow"></div>
</div>
<div class="stack">
<div class="border"></div>
<div class="border"></div>
<div class="border overlay">
<img src="https://secure.gravatar.com/avatar/d199415d5659045776c2b8513efd3968?s=140" width=140 height=140>
</div>
<div class="shadow"></div>
</div>
</div>
body {
background: #F0F0FF;
}
.wrapper {
width: 80%;
max-width: 570px;
margin: 80px auto 0;
}
.stack * {
-webkit-transition: all .4s ease-out;
-webkit-transition-delay: .2s;
}
.stack {
float: left;
position: relative;
width: 158px;
height: 168px;
padding: 30px 15px;
}
.stack:hover .border:nth-child(2) {
-webkit-transform: scale(.95) rotate(-1.2deg) translate(-2px, 3px);
}
.stack:hover .border:nth-child(1) {
-webkit-transform: scale(.94) rotate(-3.2deg) translate(-2px, 1px);
}
.stack:hover .shadow {
-webkit-transform: scale(1.1) translate(1px, -8px) skew(1deg, -1deg);
-webkit-filter: blur(8px);
}
.stack .border:nth-child(2) {
margin-top: 4px;
-webkit-transform: scale(.98);
}
.stack .border:nth-child(1) {
margin-top: 8px;
-webkit-transform: scale(.96);
}
.stack .border {
position: absolute;
width: 140px;
height: 140px;
background: white;
padding: 8px;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 10px;
z-index: 5;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2);
}
.stack .overlay:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
z-index: 2;
margin: 8px;
border-radius: 5px;
box-shadow:
0 0 1px 1px rgba(0, 0, 0, .15) inset,
0 1px 2px -1px rgba(100, 100, 100, 2) inset;
}
.stack img {
/* rounding and border */
border-radius: 6px;
box-shadow: 0 0 0 8px #fefefe;
}
.stack .shadow {
position: absolute;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(1, rgba(50,50,50, 0)),
color-stop(.14, rgba(240,240,255, .8))
);
-webkit-filter: blur(1px);
margin-left: 6px;
width: 148px;
height: 140px;
top: 100px;
z-index: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment