<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 class="container">
<div class="row">
<div class="[ col-sm-6 col-md-4 ]">
<div class="[ info-card ]">
<img style="width: 100%" src="http://placehold.it/200x200" />
<div class="[ info-card-details ] animate">
<div class="[ info-card-header ]">
<h3> bambang pamungkas </h3>
</div>
<div class="[ info-card-detail ]">
<!-- Description -->
<p>People often say that beauty is in the eye of the beholder, and I say that the most liberating thing about beauty is realizing that you are the beholder. This empowers us to find beauty in places where others have not dared to look including inside ourselves.</p>
</div>
</div>
</div>
</div>
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Lato:400,900);
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
body {
padding: 60px 0px;
}
.animate {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.info-card {
width: 200px;
height: 200px;
border: 1px solid rgb(215, 215, 215);
position: relative;
font-family: 'Lato', sans-serif;
margin-bottom: 20px;
overflow: hidden;
}
.info-card > img {
width: 50px;
margin-bottom: 60px;
}
.info-card .info-card-details,
.info-card .info-card-details .info-card-header {
width: 100%;
height: 100%;
position: absolute;
bottom: -100%;
left: 0;
padding: 0 15px;
background: rgb(255, 255, 255);
text-align: center;
}
.info-card .info-card-details::-webkit-scrollbar {
width: 8px;
}
.info-card .info-card-details::-webkit-scrollbar-button {
width: 8px;
height: 0px;
}
.info-card .info-card-details::-webkit-scrollbar-track {
background: transparent;
}
.info-card .info-card-details::-webkit-scrollbar-thumb {
background: rgb(160, 160, 160);
}
.info-card .info-card-details::-webkit-scrollbar-thumb:hover {
background: rgb(130, 130, 130);
}
.info-card .info-card-details .info-card-header {
height: auto;
bottom: 100%;
padding: 10px 5px;
}
.info-card:hover .info-card-details {
bottom: 0px;
overflow: auto;
padding-bottom: 25px;
}
.info-card:hover .info-card-details .info-card-header {
position: relative;
bottom: 0px;
padding-top: 45px;
padding-bottom: 25px;
}
.info-card .info-card-details .info-card-header h1,
.info-card .info-card-details .info-card-header h3 {
color: rgb(62, 62, 62);
font-size: 22px;
font-weight: 900;
text-transform: uppercase;
margin: 0 !important;
padding: 0 !important;
}
.info-card .info-card-details .info-card-header h3 {
color: rgb(142, 182, 52);
font-size: 15px;
font-weight: 400;
margin-top: 5px;
}
.info-card .info-card-details .info-card-detail .social {
list-style: none;
padding: 0px;
margin-top: 25px;
text-align: center;
}
.info-card .info-card-details .info-card-detail .social a {
position: relative;
display: inline-block;
min-width: 40px;
padding: 10px 0px;
margin: 0px 5px;
overflow: hidden;
text-align: center;
background-color: rgb(215, 215, 215);
border-radius: 40px;
}
a.linkedin {
color: rgb(1, 116, 179) !important;
}
a.linkedin:hover {
background-color: rgb(1, 116, 179) !important;
}
