<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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%;}}
