"Our Team Section Hover"
Bootstrap 4.1.1 Snippet by Umerfarooq

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
<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 ---------->
<div class="container mt-5">
<div class="row my-5">
<div class="col-md-4 col-sm-6">
<div class="box">
<img src="http://www.webcoderskull.com/img/team1.png" alt="">
<div class="box-content">
<h3 class="title">Kundan</h3>
<span class="post">Frontend Developer</span>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="box">
<img src="http://www.webcoderskull.com/img/team2.png" alt="">
<div class="box-content">
<h3 class="title">Vivek</h3>
<span class="post">Web developer</span>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="box">
<img src="http://www.webcoderskull.com/img/team4.png" alt="">
<div class="box-content">
<h3 class="title">Jone</h3>
<span class="post">Web developer</span>
</div>
</div>
</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
.box{
overflow:hidden;
background: #0ebeff;
position: relative;
-webkit-transition: all .35s ease;
transition: all .35s ease
}
.box:after,
.box:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #ffc107;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
opacity: .9;
z-index: 1;
-webkit-transition: all .35s ease;
transition: all .35s ease
}
.box img {
height: auto;
width: 100%
}
.box:before {
-webkit-transform: skew(45deg) translateX(-155%);
transform: skew(45deg) translateX(-155%)
}
.box:hover:before {
-webkit-transform: skew(45deg) translateX(-55%);
transform: skew(45deg) translateX(-55%)
}
.box:after {
-webkit-transform: skew(45deg) translateX(155%);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard 2 PRO
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
Hover Effect Style

Questions / Comments: