Bootstrap Snippet Team using HTML CSS Bootstrap

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="section">
    <div class="container">
    
      <div class="section_header">
        <h2 class="title section_title">Our Expert Team<span>.</span></h2>
        <span class="section_hint">web design & Development</span> </div>
        <div class="row">
      <div class="section_content teamy-team">
      <div class="col-md-3">
        <div class="teamy teamy_style1 teamy_mask-circle">
          <div class="teamy_layout">
            <div class="teamy_preview"> <img src="http://bestjquery.com/tutorial/hover-effect/demo206/images/img-1.jpg" class="teamy_avatar" alt="The demo photo"> </div>
            <div class="teamy_back">
              <div class="teamy_back-inner"> <a href="#0" class="social"> <i class="fa fa-facebook"></i> </a> <a href="#0" class="social"> <i class="fa fa-dribbble"></i> </a> <a href="#0" class="social"> <i class="fa fa-twitter"></i> </a> <a href="#0" class="social"> <i class="fa fa-envelope-o"></i> </a> </div>
            </div>
          </div>
          <div class="teamy_content">
            <h3 class="teamy_name">Suzan Lois</h3>
            <span class="teamy_post">CEO/Founder</span> </div>
        </div>
        </div>
        <div class="col-md-3">
        <div class="teamy teamy_style1 teamy_mask-circle">
          <div class="teamy_layout">
            <div class="teamy_preview"> <img src="http://bestjquery.com/tutorial/hover-effect/demo206/images/img-1.jpg" class="teamy_avatar" alt="The demo photo"> </div>
            <div class="teamy_back">
              <div class="teamy_back-inner"> <a href="#0" class="social"> <i class="fa fa-facebook"></i> </a> <a href="#0" class="social"> <i class="fa fa-dribbble"></i> </a> <a href="#0" class="social"> <i class="fa fa-twitter"></i> </a> <a href="#0" class="social"> <i class="fa fa-envelope-o"></i> </a> </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
/*=============== team ===============*/
/*
 * 1. core styles
 */
.teamy {
 position: relative;
 z-index: 1;
 overflow: hidden;
}
.teamy_layout {
 position: relative;
}
.teamy_preview {
 position: relative;
 overflow: hidden;
}
.teamy_avatar {
 display: block;
 max-width: 100%;
 position: relative;
 z-index: 1;
}
.teamy_preview:before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 2;
}
.teamy_back {
 width: 100%;
 /* height: 100%;*/
 box-sizing: border-box;
 opacity: 0;
 will-change: opacity;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Team "
Bootstrap 4.1.1 Snippet by pkumar87

Related: See More

Questions / Comments:

"Team " Bootstrap 4.1.1 Snippet by pkumar87

Related: See More

Questions / Comments:

"Team "
Bootstrap 4.1.1 Snippet by pkumar87