Bootstrap Snippet Team Design Section with Pure CSS on hover Effect 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 ---------->
    <h1 class="text-center">Team Design Section with Pure CSS Effect</h1>
    
    <div class="container">
    <div class="row">
    
    <!--team-1-->
    <div class="col-lg-4">
    <div class="our-team-main">
    
    <div class="team-front">
    <img src="http://placehold.it/110x110/9c27b0/fff?text=Dilip" class="img-fluid" />
    <h3>Dilip Kevat</h3>
    <p>Web Designer</p>
    </div>
    
    <div class="team-back">
    <span>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis 
    natoque penatibus et magnis dis parturient montes,
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis 
    natoque.
    </span>
    </div>
    
    </div>
    </div>
    <!--team-1-->
    
    <!--team-2-->
    <div class="col-lg-4">
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
body
{
    background:#00bcd4;
}
h1
{
    color:#fff;
    margin:40px 0px 60px 0px;
    font-weight:300;
  padding:2% 0px;
}
.our-team-main
{
    width:100%;
    height:auto;
    border-bottom:5px #323233 solid;
  border-right:2px #323233 dotted;
  border-left:2px #323233 dotted;
  border-top:2px #323233 dotted;
    background:#fff;
    text-align:center;
    border-radius:10px;
    overflow:hidden;
    position:relative;
    transition:0.5s;
    margin-bottom:28px;
  
}
.our-team-main img
{
    border-radius:50%;
    margin-bottom:20px;
    width: 90px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Team Design Section with Pure CSS on hover Effect"
Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"Team Design Section with Pure CSS on hover Effect" Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"Team Design Section with Pure CSS on hover Effect"
Bootstrap 4.1.1 Snippet by koshikojha