<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 ---------->
<div id="gal">
<nav class="galnav">
<ul>
<li>
<input type="radio" name="btn" value="one"/>
<label for="btn" class="entypo-right-open-big"></label>
<figure>
<img src="https://dl.dropboxusercontent.com/u/330966/static/team/new/tim_biskup.jpg"/>
<figcaption>
<h4>Tim Biskup</h4>
<nav role='navigation'>
<p>share this with your friends</p>
<ul>
<li><a href="#" class="entypo-facebook-squared"></a></li>
<li><a href="#" class="entypo-twitter"></a></li>
<li><a href="#" class="entypo-gplus"></a></li>
</ul>
</nav>
</figcaption>
</figure>
</li>
<li>
<input type="radio" name="btn" value="two" checked="checked"/>
<label for="btn" class="entypo-right-open-big"></label>
<figure>
<img src="https://dl.dropboxusercontent.com/u/330966/static/team/new/brecht_vandenbroucke.jpg"/>
<figcaption>
<h4>Brecht Vandenbroucke</h4>
<nav role='navigation'>
<p>share this with your friends</p>
<ul>
<li><a href="#" class="entypo-facebook-squared"></a></li>
<li><a href="#" class="entypo-twitter"></a></li>
<li><a href="#" class="entypo-gplus"></a></li>
</ul>
</nav>
</figcaption>
</figure>
</li>
<li>
<input type="radio" name="btn" value="three"/>
<label for="btn" class="entypo-right-open-big"></label>
<figure>
<img src="https://dl.dropboxusercontent.com/u/330966/static/team/new/andy_martin.jpg"/>
<figcaption>
<h4>Andy Martin</h4>
<nav role='navigation'>
<p>share this with your friends</p>
<ul>
<li><a href="#" class="entypo-facebook-squared"></a></li>
<li><a href="#" class="entypo-twitter"></a></li>
<li><a href="#" class="entypo-gplus"></a></li>
</ul>
</nav>
</figcaption>
</figure>
</li>
<li>
<input type="radio" name="btn" value="four"/>
<label for="btn" class="entypo-right-open-big"></label>
<figure>
<img src="https://dl.dropboxusercontent.com/u/330966/static/team/new/diana_beltran_herrera.jpg"/>
<figcaption>
<h4>Diana Beltran Herrera</h4>
<nav role='navigation'>
<p>share this with your friends</p>
<ul>
<li><a href="#" class="entypo-facebook-squared"></a></li>
<li><a href="#" class="entypo-twitter"></a></li>
<li><a href="#" class="entypo-gplus"></a></li>
</ul>
</nav>
</figcaption>
</figure>
</li>
</ul>
</nav>
</div>
<h2>All images quoted from <a href="http://berlin.pictoplasma.com/conference" target="_blank">pictoplasma berlin</a></h2>
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);
@import url(http://weloveiconfonts.com/api/?family=entypo);
*, *:before, *:after {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#gal {
position:relative;
width:600px;
height:300px;
margin:0 auto;
top:100px;
background:white;
-webkit-transform:translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#gal ul {list-style-type:none;}
input[type="radio"] {
position:absolute;
left:0;
display:block;
width:40px;
height:75px;
border:0;
outline:none;
cursor:pointer;
opacity:0;
z-index:9;
}
input[value="one"] {top:0;}
input[value="two"] {top:75px;}
input[value="three"] {top:150px;}
input[value="four"] {top:225px;}
input[type="radio"] + label {
position:absolute;
left:0;
width:40px;
height:75px;
background:#333;
z-index:7;
-webkit-transition:left .1s, width .1s;
-moz-transition:left .1s, width .1s;
-ms-transition:left .1s, width .1s;
-o-transition:left .1s, width .1s;
transition:left .1s, width .1s;
}
input[value="one"] + label {top:0;}
input[value="two"] + label {top:75px;}
input[value="three"] + label {top:150px;}
input[value="four"] + label {top:225px;}
[class*="entypo-"]:before {
position:absolute;
font-family: 'entypo', sans-serif;
}
label[class*="entypo-"]:before {
top:25px;
left:15px;
font-size:1.5rem;
color:white;
}
a[class*="entypo-"]:before {
top:3px;
left:3px;
font-size:1.5rem;
color:#333;
}
a:hover[class*="entypo-"]:before {
color:tomato;
}
figure, figure img, figcaption {
position:absolute;
top:0;
right:0;
}
figure {
bottom:0;
left:0;
width:600px;
height:300px;
display:block;
overflow:hidden;
}
figure img {
bottom:0;
left:0;
display:block;
width:600px;
height:300px;
-webkit-transform:translateX(600px);
-moz-transform:translateX(600px);
-ms-transform:translateX(600px);
-o-transform:translateX(600px);
transform:translateX(600px);
-webkit-transition:all .15s;
-moz-transition:all .15s;
-o-transition:all .15s;
transition:all .15s;
}
figcaption {
display:block;
width:300px;
height:300px;
padding-top:100px;
background:transparent;
text-align:right;
z-index:1;
-webkit-transform:translateX(300px);
-moz-transform:translateX(300px);
-ms-transform:translateX(300px);
-o-transform:translateX(300px);
transform:translateX(300px);
-webkit-transition:all .25s;
-moz-transition:all .25s;
-o-transition:all .25s;
transition:all .25s;
}
h4 {
display:inline-block;
padding:0 15px;
background:tomato;
color:white;
font-family: 'Titillium Web', sans-serif;
font-weight:300;
font-size:1.5rem;
}
figcaption nav ul {display:inline-block;padding:3px 15px;background:white;}
figcaption nav ul li {display:inline-block;margin-left:5px;}
figcaption nav ul li a {position:relative;display:block;width:30px;height:30px;text-decoration:none;color:white;}
figcaption p {display:inline-block;padding:5px 15px;background:white;font-family: 'Titillium Web', sans-serif;font-weight:300;color:#333;}
input[type="radio"]:checked + label {left:-17px;width:75px;background:tomato;}
input[type="radio"]:checked + label:before {font-size:2.5rem;top:15px;left:28px;}
input[type="radio"]:checked ~ figure img {
-webkit-transform:translatex(0px);
-moz-transform:translatex(0px);
-ms-transform:translatex(0px);
-o-transform:translatex(0px);
transform:translatex(0px);
}
input[type="radio"]:checked ~ figure figcaption {
-webkit-transform:translateX(0px);
-moz-transform:translateX(0px);
-ms-transform:translateX(0px);
-o-transform:translateX(0px);
transform:translateX(0px);
z-index:8;
}
h2 {
margin-top:150px;
text-align:center;
font-family: 'Titillium Web', sans-serif;
font-weight:300;
font-size:1.5rem;
}
h2 a {
position:relative;
color:tomato;
text-decoration:none;
}
h2 a:after {
content:'';
position:absolute;
bottom:-2px;
left:0;
width:0;
height:1px;
background:tomato;
-webkit-transition:width .1s;
-moz-transition:width .1s;
-o-transition:width .1s;
transition:width .1s;
}
h2 a:hover:after {
width:100%;
}
body {background:#d6d2d1;}
html, body {
width:100%;
height:100%;
}
