<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 ----------> <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,200,500,600,700" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <section class="container"> <div class="row active-with-click"> <div class="col-md-4 col-sm-6 col-xs-12"> <article class="material-card Red"> <l2> <span>Moch. Affandi</span> <strong> <i class="fa fa-fw fa-star"></i> Co-Founder & Marketing </strong> </l2> <div class="mc-content"> <div class="img-container"> <img class="img-responsive" src="http://rumart.weebly.com/files/theme/afandi01.jpg"> </div> <div class="mc-description"> Berpengalaman lebih dari 5 tahun berwirausaha di bidang konstruksi </div> </div> <a class="mc-btn-action"> <i class="fa fa-bars"></i> </a> <div class="mc-footer"> <h4> Social </h4> <a class="fa fa-fw fa-facebook"></a> <a class="fa fa-fw fa-instagram"></a> <a class="fa fa-fw fa-google-plus"></a> </div> </article> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <article class="material-card Red"> <l2> <span>Dian H. Saputro</span> <strong> <i class="fa fa-fw fa-star"></i> Co-Founder & Production </strong> </l2> <div class="mc-content"> <div class="img-container"> <img class="img-responsive" src="http://rumart.weebly.com/files/theme/dian01.jpg"> </div> <div class="mc-description"> Berpengalaman lebih dari 5 tahun sebagai Civil Engineer di salah satu kontraktor swasta ternama. </div> </div> <a class="mc-btn-action"> <i class="fa fa-bars"></i> </a> <div class="mc-footer"> <h4> Social </h4> <a class="fa fa-fw fa-facebook"></a> <a class="fa fa-fw fa-instagram"></a> <a class="fa fa-fw fa-google-plus"></a> </div> </article> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <article class="material-card Red"> <l2> <span>Umi Farida</span> <strong> <i class="fa fa-fw fa-star"></i> Admin & Purchasing </strong> </l2> <div class="mc-content"> <div class="img-container"> <img class="img-responsive" src="http://rumart.weebly.com/files/theme/umifarida01.jpg"> </div> <!--<div class="mc-description"> Berpengalaman lebih dari 5 tahun berwirausaha di bidang konstruksi </div>--> </div> <a class="mc-btn-action"> <i class="fa fa-bars"></i> </a> <div class="mc-footer"> <h4> Social </h4> <a class="fa fa-fw fa-facebook"></a> <a class="fa fa-fw fa-instagram"></a> <a class="fa fa-fw fa-google-plus"></a> </div> </article> </div> </div> </section> <script src="https://use.fontawesome.com/d8855d10aa.js"></script>

.fa-spin-fast { -webkit-animation: fa-spin-fast 0.2s infinite linear; animation: fa-spin-fast 0.2s infinite linear; } @-webkit-keyframes fa-spin-fast { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes fa-spin-fast { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .material-card { position: relative; height: 0; padding-bottom: calc(100% - 16px); margin-bottom: 6.6em; } .material-card l2 { position: absolute; top: calc(100% - 16px); left: 0; width: 100%; padding: 10px 16px; color: #fff; font-size: 1.4em; line-height: 1.6em; margin: 0; z-index: 10; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .material-card l2 span { display: block; } .material-card l2 strong { font-weight: 400; display: block; font-size: .8em; } .material-card l2:before, .material-card l2:after { content: ' '; position: absolute; left: 0; top: -16px; width: 0; border: 8px solid; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .material-card l2:after { top: auto; bottom: 0; } @media screen and (max-width: 767px) { .material-card.mc-active { padding-bottom: 0; height: auto; } } .material-card.mc-active l2 { top: 0; padding: 10px 16px 10px 90px; } .material-card.mc-active l2:before { top: 0; } .material-card.mc-active l2:after { bottom: -16px; } .material-card .mc-content { position: absolute; right: 0; top: 0; bottom: 16px; left: 16px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .material-card .mc-btn-action { position: absolute; right: 16px; top: 15px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 5px solid; width: 54px; height: 54px; line-height: 44px; text-align: center; color: #fff; cursor: pointer; z-index: 20; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .material-card.mc-active .mc-btn-action { top: 62px; } .material-card .mc-description { color: #37474f; position: absolute; top: 100%; right: 30px; left: 30px; bottom: 54px; overflow: hidden; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1.2s; -moz-transition: all 1.2s; -ms-transition: all 1.2s; -o-transition: all 1.2s; transition: all 1.2s; } .material-card .mc-footer { height: 0; overflow: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .material-card .mc-footer h4 { position: absolute; top: 200px; left: 30px; padding: 0; margin: 0; font-size: 16px; font-weight: 700; -webkit-transition: all 1.4s; -moz-transition: all 1.4s; -ms-transition: all 1.4s; -o-transition: all 1.4s; transition: all 1.4s; } .material-card .mc-footer a { display: block; float: left; position: relative; width: 52px; height: 52px; margin-left: 5px; margin-bottom: 15px; font-size: 28px; color: #fff; line-height: 52px; text-decoration: none; top: 200px; } .material-card .mc-footer a:nth-child(1) { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .material-card .mc-footer a:nth-child(2) { -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } .material-card .mc-footer a:nth-child(3) { -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -ms-transition: all 0.7s; -o-transition: all 0.7s; transition: all 0.7s; } .material-card .mc-footer a:nth-child(4) { -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; } .material-card .mc-footer a:nth-child(5) { -webkit-transition: all 0.9s; -moz-transition: all 0.9s; -ms-transition: all 0.9s; -o-transition: all 0.9s; transition: all 0.9s; } .material-card .img-container { overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .material-card.mc-active .img-container { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; left: 0; top: 12px; width: 60px; height: 60px; z-index: 20; } .material-card.mc-active .mc-content { padding-top: 5.6em; } @media screen and (max-width: 767px) { .material-card.mc-active .mc-content { position: relative; margin-right: 16px; } } .material-card.mc-active .mc-description { top: 50px; padding-top: 5.6em; opacity: 1; filter: alpha(opacity=100); } @media screen and (max-width: 767px) { .material-card.mc-active .mc-description { position: relative; top: auto; right: auto; left: auto; padding: 50px 30px 70px 30px; bottom: 0; } } .material-card.mc-active .mc-footer { overflow: visible; position: absolute; top: calc(100% - 16px); left: 16px; right: 0; height: 82px; padding-top: 15px; padding-left: 25px; } .material-card.mc-active .mc-footer a { top: 0; } .material-card.mc-active .mc-footer h4 { top: -32px; } .material-card.Red l2 { background-color: #2a2a2a; } .material-card.Red l2:after { border-top-color: #2a2a2a; border-right-color: #2a2a2a; border-bottom-color: transparent; border-left-color: transparent; } .material-card.Red l2:before { border-top-color: transparent; border-right-color: #1e1e1e; border-bottom-color: #1e1e1e; border-left-color: transparent; } .material-card.Red.mc-active l2:before { border-top-color: transparent; border-right-color: #2a2a2a; border-bottom-color: #2a2a2a; border-left-color: transparent; } .material-card.Red.mc-active l2:after { border-top-color: #1e1e1e; border-right-color: #1e1e1e; border-bottom-color: transparent; border-left-color: transparent; } .material-card.Red .mc-btn-action { background-color: #6c6c6c; } .material-card.Red .mc-btn-action:hover { background-color: #2a2a2a; } .material-card.Red .mc-footer h4 { color: #2a2a2a; } .material-card.Red .mc-footer a { background-color: #2a2a2a; } .material-card.Red.mc-active .mc-content { background-color: #eaeaea; } .material-card.Red.mc-active .mc-footer { background-color: #bdbdbd; } .material-card.Red.mc-active .mc-btn-action { border-color: #eaeaea; } body { background-color: #eceff1; color: #fff; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 16px; } h1, l2, h3 { font-weight: 200; }

$(function() { $('.material-card > .mc-btn-action').click(function () { var card = $(this).parent('.material-card'); var icon = $(this).children('i'); icon.addClass('fa-spin-fast'); if (card.hasClass('mc-active')) { card.removeClass('mc-active'); window.setTimeout(function() { icon .removeClass('fa-arrow-left') .removeClass('fa-spin-fast') .addClass('fa-bars'); }, 800); } else { card.addClass('mc-active'); window.setTimeout(function() { icon .removeClass('fa-bars') .removeClass('fa-spin-fast') .addClass('fa-arrow-left'); }, 800); } }); });