"simple portfolio"
Bootstrap 3.2.0 Snippet by Sagar Joshi

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

Related: See More


Questions / Comments: