CodePen

HTML

            
              <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>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              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;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................