"People card with Tabs - phpoll.com"
Bootstrap 3.3.0 Snippet by pukey22

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="col-lg-2 col-sm-6">
<div class="card hovercard">
<div class="card-background">
<img class="card-bkimg" alt="" src="http://lorempixel.com/100/100/people/9/">
<!-- http://lorempixel.com/850/280/people/9/ -->
</div>
<div class="useravatar">
<img alt="" src="http://lorempixel.com/100/100/people/9/">
</div>
<div class="card-info"> <span class="card-title">Pamela Anderson</span>
</div>
</div>
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span>
<div class="hidden-xs">Profile</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default"><span class="glyphicon glyphicon-heart"></span>
<div class="hidden-xs">Settings</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default"><span class="glyphicon glyphicon-user"></span>
<div class="hidden-xs">Logout</div>
</button>
</div>
</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
/* USER PROFILE PAGE */
.card {
margin-top: 20px;
padding: 30px;
background-color: rgba(214, 224, 226, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.hovercard {
position: relative;
padding-top: 0;
overflow: hidden;
text-align: center;
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
}
.card.hovercard .card-background {
height: 130px;
}
.card-background img {
-webkit-filter: blur(25px);
-moz-filter: blur(25px);
-o-filter: blur(25px);
-ms-filter: blur(25px);
filter: blur(25px);
margin-left: -100px;
margin-top: -200px;
min-width: 130%;
}
.card.hovercard .useravatar {
position: absolute;
top: 15px;
left: 0;
right: 0;
}
.card.hovercard .useravatar img {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Kit
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: