"team"
Bootstrap 3.0.0 Snippet by huubl

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <h2>Speakers on conference 2015</h2> <p>Not another fluffy team presentation</p> <!-- ********* <3 ********* ONE ********* <3 ********* --> <ul class="one"> <li class="transition"> <div class="wrapper"> <img class="transition" src="http://dooreight.com/codepen/people/img_01.png"> <ul class="social"> <li>Young artist from Barcelona. She hates Comic Sans. <br> Find her on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3>Lucy Copycat <em>CEO & Founder</em></h3> <img src="http://dooreight.com/codepen/people/more.svg"> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="transition" src="http://dooreight.com/codepen/people/img_02.png"> <ul class="social"> <li>Best lorem dolor guy from Detroit. Loves Helvetica. <br> Find him on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3>Johan Van Font <em>Front end developer</em></h3> <img src="http://dooreight.com/codepen/people/more.svg"> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="transition" src="http://dooreight.com/codepen/people/img_03.png"> <ul class="social"> <li>Founder of Lorem dolor web site. Loves Verdana. <br> Find him on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3>Johan Van Font <em>Front end developer</em></h3> <img src="http://dooreight.com/codepen/people/more.svg"> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="transition" src="http://dooreight.com/codepen/people/img_04.png"> <ul class="social"> <li>Times New Roman but in love with Verdana Bold. <br> Find him on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3>Johan Van Font <em>Front end developer</em></h3> <img src="http://dooreight.com/codepen/people/more.svg"> </span> </div> </li> </ul> <!-- ********* <3 ********* TWO ********* <3 ********* --> <ul class="two"> <li class="transition"> <div class="wrapper"> <img class="transition" src="http://dooreight.com/codepen/people/img_01.png"> <ul class="social"> <li>Young artist from Barcelona. She hates Comic Sans. <br> Find her on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3>Lucy Copycat <em>CEO & Founder</em></h3> <i>more</i> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="transition" src="http://dooreight.com/codepen/people/img_02.png"> <ul class="social"> <li>Best lorem dolor guy from Detroit. Loves Helvetica. <br> Find him on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3>Johan Van Font <em>Front end developer</em></h3> <i>more</i> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="transition" src="http://dooreight.com/codepen/people/img_03.png"> <ul class="social"> <li>Founder of Lorem dolor web site. Loves Verdana. <br> Find him on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3>Johan Van Font <em>Front end developer</em></h3> <i>more</i> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="transition" src="http://dooreight.com/codepen/people/img_04.png"> <ul class="social about"> <li>Times New Roman but in love with Verdana Bold. <br> Find him on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3>Johan Van Font <em>Front end developer</em></h3> <i>more</i> </span> </div> </li> </ul> <!-- ********* <3 ********* THREE ********* <3 ********* --> <ul class="three"> <li class="transition"> <div class="wrapper"> <img class="transition" src="http://dooreight.com/codepen/people/img_01.png"> <ul class="social"> <li>Young artist from Barcelona. She hates Comic Sans. <br> Find her on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3>Lucy Copycat <em>CEO & Founder</em></h3> <img class="mamber-img" src="http://dooreight.com/codepen/people/img_01.png"> <h3>Lucy Copycat</h3> <i>more</i> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="transition" src="http://dooreight.com/codepen/people/img_02.png"> <ul class="social"> <li>Best lorem dolor guy from Detroit. Loves Helvetica. <br> Find him on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3>Johan Van Font <em>Front end developer</em></h3> <i>more</i> <img class="mamber-img" src="http://dooreight.com/codepen/people/img_02.png"> <h3>Johan Van Font</h3> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="transition" src="http://dooreight.com/codepen/people/img_03.png"> <ul class="social"> <li>Founder of Lorem dolor web site. Loves Verdana. <br> Find him on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3>Johan Van Font <em>Front end developer</em></h3> <img class="mamber-img" src="http://dooreight.com/codepen/people/img_03.png"> <h3>Johan Van Font</h3> <i>more</i> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="transition" src="http://dooreight.com/codepen/people/img_04.png"> <ul class="social about"> <li>Times New Roman but in love with Verdana Bold. <br> Find him on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3>Johan Van Font <em>Front end developer</em></h3> <img class="mamber-img" src="http://dooreight.com/codepen/people/img_04.png"> <h3>Johan Van Font</h3> <i>more</i> </span> </div> </li> </ul> <!-- ********* <3 ********* FOUR ********* <3 ********* --> <ul class="four"> <li class="transition"> <div class="wrapper"> <img src="http://dooreight.com/codepen/people/icon_01.svg"> <ul class="social"> <li>Young artist from Barcelona. She hates Comic Sans. <br> Find her on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3 class="transition">Lucy Copycat <em>CEO & Founder</em></h3> <img class="mamber-img" src="http://dooreight.com/codepen/people/img_01.png"> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img src="http://dooreight.com/codepen/people/icon_02.svg"> <ul class="social"> <li>Best lorem dolor guy from Detroit. Loves Helvetica. <br> Find him on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3 class="transition">Johan Van Font <em>Front end developer</em></h3> <img class="mamber-img" src="http://dooreight.com/codepen/people/img_02.png"> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img src="http://dooreight.com/codepen/people/icon_03.svg"> <ul class="social"> <li>Founder of Lorem dolor web site. Loves Verdana. <br> Find him on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3 class="transition">Johan Van Font <em>Front end developer</em></h3> <img class="mamber-img" src="http://dooreight.com/codepen/people/img_03.png"> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img src="http://dooreight.com/codepen/people/icon_04.svg"> <ul class="social about"> <li>Times New Roman but in love with Verdana Bold. <br> Find him on:</li> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3 class="transition">Johan Van Font <em>Front end developer</em></h3> <img class="mamber-img" src="http://dooreight.com/codepen/people/img_04.png"> </span> </div> </li> </ul> <!-- ********* <3 ********* FIVE ********* <3 ********* --> <ul class="five"> <li class="transition"> <div class="wrapper"> <img class="more-about" src="http://dooreight.com/codepen/people/more_blue.svg"> <ul class="social"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <img src="http://dooreight.com/codepen/people/img_01.png"> <h3 class="transition">Lucy Copycat <em>CEO & Founder</em></h3> <span class="transition"> <div class="text-wrapper transition"> <p> Young artist from Barcelona. She hates Comic Sans. It was popularised in the 1960s with the release Letraset sheets containing. Various versions have evolved over the years.</p> </div> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="more-about" src="http://dooreight.com/codepen/people/more_blue.svg"> <ul class="social"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <img src="http://dooreight.com/codepen/people/img_02.png"> <h3 class="transition">Lucy Copycat <em>CEO & Founder</em></h3> <span class="transition"> <div class="text-wrapper transition"> <p> Young artist from Barcelona. She hates Comic Sans. It was popularised in the 1960s with the release Letraset sheets containing. Various versions have evolved over the years.</p> </div> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="more-about" src="http://dooreight.com/codepen/people/more_blue.svg"> <ul class="social"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <img src="http://dooreight.com/codepen/people/img_03.png"> <h3 class="transition">Lucy Copycat <em>CEO & Founder</em></h3> <span class="transition"> <div class="text-wrapper transition"> <p> Young artist from Barcelona. She hates Comic Sans. It was popularised in the 1960s with the release Letraset sheets containing. Various versions have evolved over the years.</p> </div> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="more-about" src="http://dooreight.com/codepen/people/more_blue.svg"> <ul class="social"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <img src="http://dooreight.com/codepen/people/img_04.png"> <h3 class="transition">Lucy Copycat <em>CEO & Founder</em></h3> <span class="transition"> <div class="text-wrapper transition"> <p> Young artist from Barcelona. She hates Comic Sans. It was popularised in the 1960s with the release Letraset sheets containing. Various versions have evolved over the years.</p> </div> </span> </div> </li> </ul> <!-- ********* <3 ********* SIX ********* <3 ********* --> <ul class="six"> <li class="transition"> <div class="wrapper"> <img class="mamber-img transition" src="http://dooreight.com/codepen/people/img_01.png"> <ul class="social"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3 class="transition">Lucy Copycat <em>CEO & Founder</em></h3> <img class="transition" src="http://dooreight.com/codepen/people/icon_01_white.svg"> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="mamber-img transition" src="http://dooreight.com/codepen/people/img_02.png"> <ul class="social"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3 class="transition">Johan Van Font <em>Front end developer</em></h3> <img class="transition" src="http://dooreight.com/codepen/people/icon_02_white.svg"> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="mamber-img transition" src="http://dooreight.com/codepen/people/img_03.png"> <ul class="social"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3 class="transition">Johan Van Font <em>Front end developer</em></h3> <img class="transition" src="http://dooreight.com/codepen/people/icon_03_white.svg"> </span> </div> </li> <li class="transition"> <div class="wrapper"> <img class="mamber-img transition" src="http://dooreight.com/codepen/people/img_04.png"> <ul class="social about"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3 class="transition">Johan Van Font <em>Front end developer</em></h3> <img class="transition" src="http://dooreight.com/codepen/people/icon_04_white.svg"> </span> </div> </li> </ul> <!-- ********* <3 ********* SEVEN ********* <3 ********* --> <ul class="seven"> <li class="transition"> <div class="wrapper"> <ul class="social transition"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3 class="transition">Johan Van Font <em>Front end developer</em></h3> <img class="transition" src="http://dooreight.com/codepen/people/icon_02_white.svg"> <h4 class="transition">Contact me:</h4> </span> <div class="arrow"></div> </div> </li> <li class="transition"> <div class="wrapper"> <ul class="social transition"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3 class="transition">Johan Van Font <em>Front end developer</em></h3> <img class="transition" src="http://dooreight.com/codepen/people/icon_02_white.svg"> <h4 class="transition">Contact me:</h4> </span> <div class="arrow"></div> </div> </li> <li class="transition"> <div class="wrapper"> <ul class="social transition"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3 class="transition">Johan Van Font <em>Front end developer</em></h3> <img class="transition" src="http://dooreight.com/codepen/people/icon_02_white.svg"> <h4 class="transition">Contact me:</h4> </span> <div class="arrow"></div> </div> </li> <li class="transition"> <div class="wrapper"> <ul class="social about transition"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <span class="transition"> <h3 class="transition">Johan Van Font <em>Front end developer</em></h3> <img class="transition" src="http://dooreight.com/codepen/people/icon_02_white.svg"> <h4 class="transition">Contact me:</h4> </span> <div class="arrow"></div> </div> </li> </ul> <!-- ********* <3 ********* EIGHT ********* <3 ********* --> <ul class="eight"> <li class="transition"> <div class="wrapper"> <span class="transition"> <h3 class="transition">Lidel Hofer<em>My tube CEO</em></h3> <div class='image-container transition'> <div class='creation'> <div class='front'> <div class='cont'> <i class='details'><img class="icon-circle transition" src="http://dooreight.com/codepen/people/icon_02_white.svg"></i> </div> </div> <div class='back'> <div class='cont'> <i class='details'><img src="http://dooreight.com/codepen/people/img_02.png"></i> </div> </div> </div> </div> </span> <ul class="social transition"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <div class="arrow"></div> </div> </li> <li class="transition"> <div class="wrapper"> <span class="transition"> <h3 class="transition">Orson Owel<em>My best friend</em></h3> <div class='image-container transition'> <div class='creation'> <div class='front'> <div class='cont'> <i class='details'><img class="icon-circle transition" src="http://dooreight.com/codepen/people/icon_02_white.svg"></i> </div> </div> <div class='back'> <div class='cont'> <i class='details'><img src="http://dooreight.com/codepen/people/img_02.png"></i> </div> </div> </div> </div> </span> <ul class="social transition"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <div class="arrow"></div> </div> </li> <li class="transition"> <div class="wrapper"> <span class="transition"> <h3 class="transition">Georgia Times<em>Beck end developer</em></h3> <div class='image-container transition'> <div class='creation'> <div class='front'> <div class='cont'> <i class='details'><img class="icon-circle transition" src="http://dooreight.com/codepen/people/icon_02_white.svg"></i> </div> </div> <div class='back'> <div class='cont'> <i class='details'><img src="http://dooreight.com/codepen/people/img_02.png"></i> </div> </div> </div> </div> </span> <ul class="social transition"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <div class="arrow"></div> </div> </li> <li class="transition"> <div class="wrapper"> <span class="transition"> <h3 class="transition">Dosis Van Dana<em>Copy and thinker</em></h3> <div class='image-container transition'> <div class='creation'> <div class='front'> <div class='cont'> <i class='details'><img class="icon-circle transition" src="http://dooreight.com/codepen/people/icon_02_white.svg"></i> </div> </div> <div class='back'> <div class='cont'> <i class='details'><img src="http://dooreight.com/codepen/people/img_02.png"></i> </div> </div> </div> </div> </span> <ul class="social transition"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> <div class="arrow"></div> </div> </li> </ul> <!-- ********* <3 ********* NINE ********* <3 ********* --> <ul class="nine"> <li class="transition"> <div class="wrapper"> <span class="transition"> <img class="transition" src="http://dooreight.com/codepen/people/img_05.png"></a> <h4 class="transition">Contact me</h4> </span> <h3 class="transition">Johan Van Font <em>Front end developer</em></h3> <div class="trigger"> <i class="transition">+</i> </div> <ul class="social transition"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> </div> </li> <li class="transition"> <div class="wrapper"> <span class="transition"> <img class="transition" src="http://dooreight.com/codepen/people/img_06.png"></a> <h4 class="transition">Contact me</h4> </span> <h3 class="transition">Georgia Times<em>Front end developer</em></h3> <div class="trigger"> <i class="transition">+</i> </div> <ul class="social transition"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> </div> </li> <li class="transition"> <div class="wrapper"> <span class="transition"> <img class="transition" src="http://dooreight.com/codepen/people/img_07.png"></a> <h4 class="transition">Contact me</h4> </span> <h3 class="transition">Johan Van Font <em>Front end developer</em></h3> <div class="trigger"> <i class="transition">+</i> </div> <ul class="social transition"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> </div> </li> <li class="transition"> <div class="wrapper"> <span class="transition"> <img class="transition" src="http://dooreight.com/codepen/people/img_08.png"></a> <h4 class="transition">Contact me</h4> </span> <h3 class="transition">Johan Van Font <em>Front end developer</em></h3> <div class="trigger"> <i class="transition">+</i> </div> <ul class="social transition"> <li class="transition"><a href="https://www.facebook.com"><img src="http://dooreight.com/codepen/people/twitter.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/behance.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/facebook.svg"></a></li> <li class="transition"><a href="#"><img src="http://dooreight.com/codepen/people/skype.svg"></a></li> </ul> </div> </li> </ul>
@import url('https://fonts.googleapis.com/css?family=Lato:400,700'); @import url('https://fonts.googleapis.com/css?family=Dosis:400,700'); @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); body { font-family: 'Lato', sans-serif; text-align: center; padding-top: 60px; } h2 { font-size: 50px; margin-bottom: 0px; font-weight: 100; } p { font-size: 18px; } .transition { transition: .3s cubic-bezier(.3, 0, 0, 1.3) } .three .transition { transition: .7s cubic-bezier(.3, 0, 0, 1.3) } .five .transition { transition: .5s cubic-bezier(.3, 0, 0, 1.3) } /* --------- ONE --------- */ .one { list-style: none; padding: 0; margin: 100px 0; } .one > li { background: #FFFFFF; border: 1px solid rgba(150,150,150,0.29); -moz-box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); width: 250px; height: 430px; display: inline-block; margin: 0 20px; text-align: center; } .one > li img { margin-top: 60px; } .one > li:hover img { margin-top: 30px; } .one > li:hover { -moz-box-shadow: 0px 0px 5px 0px rgba(103,85,85,0.25); box-shadow: 0px 0px 5px 0px rgba(103,85,85,0.25); } .one > li:hover span { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; bottom: -400px; } .one > li:hover h3 { color: rgba(255,255,255,1); margin-top: 25px; } .one > li .wrapper { overflow: hidden; position: absolute; width: 250px; height: 430px; } .one > li span { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; height: 500px; width: 500px; background: #D75E3D; display: block; position: absolute; bottom: -300px; left: -125px; } .one > li span img { margin-top: 10px; width: 50px; } .one > li span:hover { background: #D75E3D; } .one > li h3 { margin-top: 40px; color: rgba(255,255,255,1); } .one > li h3 em { display: block; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 12px; margin-top: 5px; } .one .social { list-style: none; text-align: center; margin: 10px 0 0 0; padding: 10px; } .one .social li { opacity: 0; display: inline-block; padding: 5px; } .one > li:hover .social li { opacity: 0.5; } .one .social li a { cursor: pointer; display: block; } .one .social li a:hover { opacity: 0.5; } .one .social li img { width: 24px; } /* --------- TWO --------- */ .two { list-style: none; padding: 0; margin: 100px 0; } .two > li { background: #FFFFFF; border: 1px solid rgba(150,150,150,0.29); -moz-box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); width: 250px; height: 430px; display: inline-block; margin: 0 20px; text-align: center; } .two > li img { margin-top: 60px; } .two > li:hover img { margin-top: 30px; } .two > li:hover { -moz-box-shadow: 0px 0px 5px 0px rgba(103,85,85,0.25); box-shadow: 0px 0px 5px 0px rgba(103,85,85,0.25); } .two > li:hover span { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; bottom: -400px; } .two > li:hover h3 { color: rgba(255,255,255,1); margin-top: 25px; } .two > li .wrapper { overflow: hidden; position: absolute; width: 250px; height: 430px; } .two > li span { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; height: 500px; width: 500px; background: #BE2F41; display: block; position: absolute; bottom: -300px; left: -125px; } .two > li span i { color: #fff; text-transform: uppercase; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border: 2px solid #fff; padding: 10px 30px; font-style: normal; margin-top: 10px; display: inline-block; } .two > li span:hover { background: #532538; } .two > li h3 { margin-top: 40px; color: rgba(255,255,255,1); } .two > li h3 em { display: block; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 12px; margin-top: 5px; } .two .social { list-style: none; text-align: center; margin: 10px 0 0 0; padding: 10px; } .two .social li { opacity: 0; padding: 5px; display: inline-block; } .two > li:hover .social li { opacity: 0.9; } .two .social li a { cursor: pointer; display: block; opacity: 1; } .two .social li a:hover { opacity: 0.5; margin-top: 0px; } .two > li:hover .social li a { -webkit-animation: social-show 0.5s 1; -moz-animation: social-show 0.5s 1; -o-animation: social-show 0.5s 1; animation: social-show 0.5s 1; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; } .two .social li img { width: 24px; } @-webkit-keyframes social-show { from { margin-top: 140px; } to { margin-top: 0px; } } @-moz-keyframes social-show { from { margin-top: 140px; } to { margin-top: 0px; } } @-o-keyframes social-show { from { margin-top: 140px; } to { margin-top: 0px; } } @keyframes social-show { from { margin-top: 140px; } to { margin-top: 0px; } } /* --------- THREE --------- */ .three { list-style: none; padding: 0; margin: 100px 0; } .three > li { background: #FFFFFF; border: 1px solid rgba(150,150,150,0.29); -moz-box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); width: 250px; height: 430px; display: inline-block; margin: 0 20px; text-align: center; } .three > li img { margin-top: 60px; } .three > li:hover img { margin-top: 40px; } .three > li:hover { -moz-box-shadow: 0px 0px 5px 0px rgba(103,85,85,0.25); box-shadow: 0px 0px 5px 0px rgba(103,85,85,0.25); } .three > li:hover span { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; bottom: -400px; } .three > li:hover h3 { color: rgba(255,255,255,1); margin-top: 25px; } .three > li .wrapper { overflow: hidden; position: absolute; width: 250px; height: 430px; } .three > li span { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; height: 500px; width: 500px; background: #ECD16B; display: block; position: absolute; bottom: 150px; left: -125px; } .three > li span img { margin-top: 10px; width: 50px; } .three > li span:hover { background: #ECD16B; } .three > li span i { position: absolute; bottom: -90px; color: #ECD16B; text-transform: uppercase; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border: 2px solid #ECD16B; padding: 10px 30px; font-style: normal; display: inline-block; left: 195px; } .three > li span .mamber-img { width: 120px; margin-top: 170px; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); } .three > li span .mamber-img + h3 { margin-top: 20px; } .three > li h3 { margin-top: 40px; color: rgba(255,255,255,1); } .three > li h3 em { display: block; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 12px; margin-top: 5px; } .three .social { list-style: none; text-align: center; margin: 0; padding: 10px; } .three .social li { opacity: 0; display: inline-block; padding: 5px; } .three > li:hover .social li { opacity: 0.8; } .three .social li a { cursor: pointer; display: block; } .three .social li a:hover { opacity: 0.5; } .three .social li img { width: 24px; } /* --------- FOUR --------- */ .four { list-style: none; padding: 0; margin: 100px 0; } .four > li { background: #FFFFFF; border: 1px solid rgba(150,150,150,0.29); -moz-box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); width: 250px; height: 350px; display: inline-block; margin: 0 20px; text-align: center; } .four > li img { margin-top: 40px; } .four > li:hover img { margin-top: 30px; } .four > li:hover { -moz-box-shadow: 0px 0px 5px 0px rgba(103,85,85,0.25); box-shadow: 0px 0px 5px 0px rgba(103,85,85,0.25); } .four > li:hover span { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; bottom: -400px; } .four > li:hover .wrapper > img { display: none; } .four > li:hover h3 { color: #2F7ABE; margin-top: -70px; } .four > li .wrapper { overflow: hidden; position: absolute; width: 250px; height: 350px; } .four > li span { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; height: 500px; width: 500px; background: #2F7ABE; display: block; position: absolute; bottom: -300px; left: -125px; } .four > li span img { margin-top: 10px; width: 50px; } .four > li span:hover { background: #2F7ABE; } .four > li h3 { margin-top: 40px; color: rgba(255,255,255,1); } .four > li h3 em { display: block; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 12px; margin-top: 5px; } .four .social { list-style: none; text-align: center; margin: 10px 0 0 0; padding: 10px; } .four .social li { opacity: 0; display: inline-block; padding: 5px; } .four > li:hover .social li { opacity: 0.5; } .four .social li a { cursor: pointer; display: block; } .four .social li a:hover { opacity: 0.5; } .four .social li img { width: 24px; } /* --------- FIVE --------- */ .five { list-style: none; padding: 0; margin: 100px 0; } .five > li { background: #FFFFFF; border: 1px solid rgba(150,150,150,0.29); -moz-box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); width: 250px; height: 350px; display: inline-block; margin: 0 20px; text-align: center; } .five > li img { margin-top: -5px; } .five > li:hover img { margin-top: 30px; } .five > li img.more-about { left: 103px; padding: 1px; position: absolute; width: 45px; z-index: 1; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; bottom: 50px; } .five > li:hover { -moz-box-shadow: 0px 0px 5px 0px rgba(103,85,85,0.25); box-shadow: 0px 0px 5px 0px rgba(103,85,85,0.25); } .five > li:hover span { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; top: -300px; background: #2f7abe; } .five > li:hover span p { color: white; font-size: 14px; } .five > li span .text-wrapper { opacity: 0; } .five > li:hover span .text-wrapper { bottom: 20px; left: 0; margin: 0 auto; position: absolute; right: 0; width: 200px; opacity: 1; } .five > li:hover .social { margin-top: 250px; } .five > li:hover .wrapper > img { display: none; } .five > li:hover h3 { color: #2F7ABE; margin-top: -105px; } .five > li .wrapper { overflow: hidden; position: absolute; width: 250px; height: 350px; } .five > li span { display: block; height: 500px; left: -125px; position: absolute; top: -490px; width: 500px; background: #579CDB; } .five .mamber-img { width: 100px; } .five > li h3 em { display: block; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 12px; margin-top: 5px color: #2F7ABE; } .five .social { list-style: none; text-align: center; margin: 10px 0 0 0; padding: 10px; } .five .social li { opacity: 0; display: inline-block; padding: 5px; } .five > li:hover .social li { opacity: 0.5; } .five .social li a { cursor: pointer; display: block; } .five .social li a:hover { opacity: 0.5; } .five .social li img { width: 24px; } .five > li:hover .social li a { -webkit-animation: social-show 0.5s 1; -moz-animation: social-show 0.5s 1; -o-animation: social-show 0.5s 1; animation: social-show 0.5s 1; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; } .five .social li img { width: 24px; } @-webkit-keyframes social-show { from { margin-top: 140px; } to { margin-top: 0px; } } @-moz-keyframes social-show { from { margin-top: 140px; } to { margin-top: 0px; } } @-o-keyframes social-show { from { margin-top: 140px; } to { margin-top: 0px; } } @keyframes social-show { from { margin-top: 140px; } to { margin-top: 0px; } } /* --------- SIX --------- */ .six { list-style: none; padding: 0; margin: 100px 0; } .six > li { background: #FFFFFF; border: 1px solid rgba(150,150,150,0.29); -moz-box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); width: 250px; height: 350px; display: inline-block; margin: 0 20px; text-align: center; } .six > li img { margin-top: 40px; } .six > li:hover img { margin-top: 30px; width: 100px; } .six > li:hover { -moz-box-shadow: 0px 0px 5px 0px rgba(103,85,85,0.25); box-shadow: 0px 0px 5px 0px rgba(103,85,85,0.25); } .six > li:hover span { bottom: -330px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .six > li:hover .wrapper > img { display: none; } .six > li:hover h3 { color: #000; margin-top: -70px; } .six > li .wrapper { overflow: hidden; position: absolute; width: 250px; height: 350px; } .six > li span { height: 500px; width: 500px; background: #BA4878; display: block; position: absolute; bottom: -330px; left: -125px; } .six > li span img { margin-top: -5px; width: 50px; } .six > li span:hover { background: #BA4878; } .six > li h3 { margin-top: 40px; color: rgba(255,255,255,1); } .six > li h3 em { display: block; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 12px; margin-top: 5px; } .six .social { list-style: none; text-align: center; margin: 10px 0 0 0; padding: 10px; } .six .social li { opacity: 0; display: inline-block; padding: 5px; } .six > li:hover .social li { opacity: 0.5; } .six .social li a { cursor: pointer; display: block; } .six .social li a:hover { opacity: 0.5; } .six .social li img { width: 24px; } /* --------- SEVEN --------- */ .seven { list-style: none; padding: 0; margin: 100px 0; } .seven > li { background: #FFFFFF; border: 1px solid rgba(150,150,150,0.29); -moz-box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); width: 250px; height: 350px; display: inline-block; margin: 0 20px; text-align: center; cursor: pointer; overflow: hidden; } .seven .wrapper { position: relative; height: 100%; } .seven .social { list-style: none; text-align: center; position: absolute; bottom: -40px; margin: 0; padding: 0; text-align: center; width: 100%; } .seven .social li { display: inline-block; margin: 0 2px; } .seven .social li img { width: 24px; } .seven .social li img:hover { opacity: 0.5; } .seven > li:hover .social { bottom: 30px; } .seven span { background: #6eb11f; display: block; position: absolute; top: 0; height: 220px; width: 100%; padding-top: 60px; } .seven > li:hover span { top: -40px; } .seven h3 { font-style: 14px; opacity: 0.9; } .seven h3 em { opacity: 0.9; font-size: 12px; font-weight: normal; font-style: normal; display: block; } .seven .arrow { position: absolute; bottom: 12px; background-image: url("../img/arrow.svg"); background-repeat: no-repeat; background-position: center 10px; height: 60px; width: 100%; } @-webkit-keyframes arrow { 0% { background-position: center top; } 50% { background-position: center 10px; } 100% { background-position: center top; } } @-moz-keyframes arrow { 0% { background-position: center top; } 50% { background-position: center 10px; } 100% { background-position: center top; } } @keyframes arrow { 0% { background-position: center top; } 50% { background-position: center 10px; } 100% { background-position: center top; } } .seven > li:hover .arrow { bottom: 50px; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-animation: arrow 0.6s infinite; -moz-animation: arrow 0.6s infinite; animation: arrow 0.6s infinite; } .seven h4 { color: #fff; text-transform: uppercase; font-weight: 300; font-size: 13px; width: 100%; position: absolute; bottom: -40px; } .seven > li:hover h4 { bottom: 0; } /* --------- EIGHT --------- */ .eight { list-style: none; padding: 0; margin: 100px 0; } .eight > li { background: #FFFFFF; border: 1px solid rgba(150,150,150,0.29); -moz-box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); width: 250px; height: 350px; display: inline-block; margin: 0 20px; text-align: center; cursor: pointer; overflow: hidden; } .eight .wrapper { position: relative; height: 100%; } .eight .social { list-style: none; text-align: center; position: absolute; bottom: -25px; margin: 0; padding: 0; text-align: center; width: 100%; } .eight .social li { display: inline-block; margin: 0 2px; } .eight .social li img { width: 24px; } .eight .social li img:hover { opacity: 0.5; } .eight > li:hover .social { bottom: 30px; } .eight span { background: #8cc1b7; display: block; position: absolute; top: 0; height: 145px; width: 100%; padding-top: 30px; } .eight > li:hover span { height: 160px; } .eight h3 { font-style: 14px; opacity: 0.9; } .eight > li:hover h3 { color: #fff; } .eight h3 em { opacity: 0.9; font-size: 12px; font-weight: normal; font-style: normal; display: block; } .eight .arrow { position: absolute; bottom: 12px; background-image: url("../img/arrow-green.svg"); background-repeat: no-repeat; background-position: center 10px; height: 60px; width: 100%; } @-webkit-keyframes arrow { 0% { background-position: center top; } 50% { background-position: center 10px; } 100% { background-position: center top; } } @-moz-keyframes arrow { 0% { background-position: center top; } 50% { background-position: center 10px; } 100% { background-position: center top; } } @keyframes arrow { 0% { background-position: center top; } 50% { background-position: center 10px; } 100% { background-position: center top; } } .eight > li:hover .arrow { bottom: 50px; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-animation: arrow 0.6s infinite; -moz-animation: arrow 0.6s infinite; animation: arrow 0.6s infinite; } .eight h4 { color: #fff; text-transform: uppercase; font-weight: 300; font-size: 13px; width: 100%; position: absolute; bottom: -40px; } .eight > li:hover h4 { bottom: 0; } .eight > li:hover .image-container { top: 120px; } .image-container { position: absolute; left: 64px; -webkit-perspective: 1200; -moz-perspective: 1200; perspective: 1200; top: 90px; } .image-container:hover .creation { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } .creation { width: 120px; height: 120px; float: left; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .front, .back { position: absolute; top: 0; left::0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; border-radius: 100px; } .back { z-index: 800; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateY(-180deg); background: rgba(255,255,255,0.1); } .creation p span { vertical-align: middle; display: inline-block; line-height: 1.4; } .cont { border-radius: 50%; background-color: #8cc1b7; width: 120px; height: 120px; display: inline-block; } .eight > li:hover .creation { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } .eight .icon-circle { margin-top: 20px; } /* --------- NINE --------- */ .nine { list-style: none; padding: 0; margin: 100px 0; } .nine > li { background: #FFFFFF; border: 1px solid rgba(150,150,150,0.29); -moz-box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); box-shadow: 0px 0px 18px 0px rgba(103,85,85,0.39); width: 250px; height: 400px; display: inline-block; margin: 0 20px; text-align: center; cursor: pointer; overflow: hidden; } .nine .wrapper { position: relative; height: 100%; } .nine .social { list-style: none; text-align: center; position: absolute; bottom: 40px; margin: 0; padding: 0; text-align: center; width: 100%; opacity: 0; } .nine .social li { display: inline-block; margin: 0 2px; } .nine .social li img { width: 24px; } .nine .social li img:hover { opacity: 0.5; } .nine > li:hover .social { bottom: 130px; opacity: 1; } .nine span { background: #78CACE; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; height: 500px; width: 500px; display: block; position: absolute; bottom: 240px; left: -125px; } .nine > li:hover span { bottom: 300px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .nine span img { position: absolute; bottom: 30px; left: 210px; } .nine > li:hover span img { bottom: -20px; } .nine h3 { position: absolute; top: 160px; font-family: 'Dosis', sans-serif; color: #78CACE; text-transform: uppercase; font-size: 27px; width: 100%; } .nine h3 em { font-family: 'Open Sans', sans-serif; color: #444; font-size: 12px; font-style: normal; display: block; margin-top: 2px; opacity: 0.8; } .nine > li:hover h3 { top: 100px; } .nine .trigger { position: absolute; bottom: 40px; width: 100%; text-align: center; } .nine .trigger i { width: 45px; height: 45px; background:; color: #fff; font-family: 'Dosis', sans-serif; font-weight: 600; display: block; background: #FFE08E; font-style: normal; font-size: 26px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin: 0 auto; } .nine > li:hover .trigger i { width: 30px; height: 30px; margin-bottom: 20px; font-size: 18px; } @-webkit-keyframes arrow { 0% { background-position: center top; } 50% { background-position: center 10px; } 100% { background-position: center top; } } @-moz-keyframes arrow { 0% { background-position: center top; } 50% { background-position: center 10px; } 100% { background-position: center top; } } @keyframes arrow { 0% { background-position: center top; } 50% { background-position: center 10px; } 100% { background-position: center top; } }

Related: See More


Questions / Comments: