"Swipe boxes"
Bootstrap 3.0.3 Snippet by tochman

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="boxes"> <a href="" class="box"> <div class="indicator-t"></div> <div class="indicator-r"></div> <div class="indicator-b"></div> <div class="indicator-l"></div> <figure class="single"> <img src="https://github.com/tochman/agileventures-profile/blob/master/small_avatar.png?raw=true" alt="" /> <figcaption class="caption"> <h3>Simple</h3> </figcaption> </figure> </a> <a href="" class="box"> <div class="indicator-t"></div> <div class="indicator-r"></div> <div class="indicator-b"></div> <div class="indicator-l"></div> <figure class="single"> <img src="https://github.com/tochman/agileventures-profile/blob/master/small_avatar.png?raw=true" alt="" /> <figcaption class="caption"> <h3>Avant Garde Gothic</h3> </figcaption> </figure> </a> <a href="" class="box"> <div class="indicator-t"></div> <div class="indicator-r"></div> <div class="indicator-b"></div> <div class="indicator-l"></div> <figure class="single"> <img src="https://github.com/tochman/agileventures-profile/blob/master/small_avatar.png?raw=true" alt="" /> <figcaption class="caption"> <h3>Thomas</h3> </figcaption> </figure> </a> </section>
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300italic); *, *:before, *:after { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } body { background:#58585A; background: -moz-radial-gradient(center, ellipse cover, #333333 0%, #0d0d0d 100%); background: -webkit-radial-gradient(center, ellipse cover, #333333 0%,#0d0d0d 100%); background: -o-radial-gradient(center, ellipse cover, #333333 0%,#0d0d0d 100%); background: -ms-radial-gradient(center, ellipse cover, #333333 0%,#0d0d0d 100%); background: radial-gradient(ellipse at center, #333333 0%,#0d0d0d 100%); background:radial-gradient(#333, #0d0d0d); } html, body { width:100%; height:100%; font-family: 'Merriweather Sans', sans-serif; color:#141414; } a {color:#141414;text-decoration:none;} .boxes { position:relative; width:100%; max-width:65rem; margin: 2rem auto 0 auto; display:-webkit-flex; display:flex; -webkit-flex-flow: row wrap; justify-content: center; } .box { position:relative; float:left; width:33.333%; height:0; padding-bottom:33.333%; overflow:hidden; background:#CAE0E5; box-shadow:1rem 1rem 1rem rgba(0,0,0,0.35); -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } div[class^="indicator"] { position:absolute; width:70.71%; height:70.71%; z-index:777; } div[class$="-t"] { top:0; left:0; -webkit-transform-origin:0 0; -webkit-transform:rotate(-45deg); transform-origin:0 0; transform:rotate(-45deg); } div[class$="-r"] { top:0; right:0; -webkit-transform-origin:100% 0; -webkit-transform:rotate(-45deg); transform-origin:100% 0; transform:rotate(-45deg); } div[class$="-b"] { bottom:0; left:0; -webkit-transform-origin:0 100%; -webkit-transform:rotate(45deg); transform-origin:0 100%; transform:rotate(45deg); } div[class$="-l"] { top:0; left:0; -webkit-transform-origin:0 0; -webkit-transform:rotate(45deg); transform-origin:0 0; transform:rotate(45deg); } div[class^="indicator"]:hover { width:100%; height:100%; z-index:888; -webkit-transform:rotate(0); transform:rotate(0); } .single { position:absolute; top:0; left:0; width:100%; height:100%; } .single > img { width:110%; height:auto; -webkit-transition:-webkit-transform .2s cubic-bezier(.17,.67,.83,.67); transition:transform .2s cubic-bezier(.17,.67,.83,.67); } .caption { position:absolute; display:-webkit-flex; display:flex; top:100%; right:0; bottom:0; left:0; width:100%; height:100%; background:white; text-align:center; align-content:center; -webkit-transform:translateY(0); transform:translateY(0); -webkit-transition:top 0s 1s, right 0s 1s, bottom 0s 1s, left 0s 1s, -webkit-transform 0.2s cubic-bezier(.17,.67,.83,.67); transition:top 0s 1s, right 0s 1s, bottom 0s 1s, left 0s 1s, transform 0.2s cubic-bezier(.17,.67,.83,.67); } .caption > h3 { margin:auto; font-size:1.6em; font-style:italic; font-weight:300; text-decoration:none; } div[class$="-t"]:hover ~ .single > img { -webkit-transform:translateY(3rem); transform:translateY(3rem); } div[class$="-r"]:hover ~ .single > img { -webkit-transform:translateX(-3rem); transform:translateX(-3rem); } div[class$="-b"]:hover ~ .single > img { -webkit-transform:translateY(-3rem); transform:translateY(-3rem); } div[class$="-l"]:hover ~ .single > img { -webkit-transform:translateX(3rem); transform:translateX(3rem); } div[class$="-t"]:hover ~ .single > .caption { top:-100%; bottom:100%; -webkit-transform:translateY(100%); transform:translateY(100%); -webkit-transition:top 0s, bottom 0s, -webkit-transform 0.2s linear; transition:top 0s, bottom 0s, transform 0.2s linear; } div[class$="-r"]:hover ~ .single > .caption { top:0; right:0; left:100%; -webkit-transform:translateX(-100%); transform:translateX(-100%); -webkit-transition:top 0s, bottom 0s, -webkit-transform 0.2s linear; transition:top 0s, bottom 0s, transform 0.2s linear; } div[class$="-b"]:hover ~ .single > .caption { top:100%; bottom:0; -webkit-transform:translateY(-100%); transform:translateY(-100%); -webkit-transition:top 0s, bottom 0s, -webkit-transform 0.2s linear; transition:top 0s, bottom 0s, transform 0.2s linear; } div[class$="-l"]:hover ~ .single > .caption { top:0; left:-100%; -webkit-transform:translateX(100%); transform:translateX(100%); -webkit-transition:top 0s, bottom 0s, -webkit-transform 0.2s linear; transition:top 0s, bottom 0s, transform 0.2s linear; } @media screen and (max-width: 50.000em) {.box {width:50%;padding-bottom:50%;}} @media screen and (max-width: 20.000em) {.box {width:100%;padding-bottom:100%;}}

Related: See More


Questions / Comments: