"Pixels - trainers' biodata"
Bootstrap 3.3.0 Snippet by andrewbsc

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="our-team">
<div class="team-image">
<img src="images/img-1.jpg">
<ul class="social">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-pinterest-p"></a></li>
</ul>
</div>
<div class="team-content">
<h3 class="title">Williamson</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, in.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="our-team">
<div class="team-image">
<img src="images/img-2.jpg">
<ul class="social">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-pinterest-p"></a></li>
</ul>
</div>
<div class="team-content">
<h3 class="title">Kristiana</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, in.</p>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.our-team{
text-align: center;
}
.our-team .team-image{
width: 80%;
height: 80%;
border-radius: 50%;
border: 5px solid #d7d7d7;
position: relative;
margin: 0 auto;
transition: all 0.5s ease 0s;
}
.our-team:hover .team-image{
border-color: #1fc5b6;
}
.our-team .team-image img{
width: 100%;
height: auto;
border-radius: 50%;
}
.our-team .social{
margin: 0;
padding: 0;
list-style: none;
width: 100%;
position: absolute;
top: 45%;
opacity: 0;
transform: scale(0);
transition: all 0.5s ease 0s;
}
.our-team:hover .social{
opacity: 1;
transform: scale(1);
animation: 0.5s ease 0s normal 1 bounce;
}
.our-team .social li{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template

Questions / Comments: