"Hover Effects"
Bootstrap 4.1.1 Snippet by koshikojha

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/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 ---------->
<section class="feature-area">
<div class="container">
<div class="row feature-box">
<div class="col-md-4 col-sm-6">
<div class="feature-item">
<span class="feature__number">01</span>
<span class="flaticon-003-target feature__icon"></span>
<h3 class="feature__title">
<a href="service-detail.html">finance management.</a>
</h3>
<p class="feature__desc">
sed quia lipsum dolor sit atur adipiscing elit is nunc quis
tellus sed ligula porta ultricies quis nec neulla.
</p>
</div><!-- end feature-item -->
</div><!-- end col-md-4 -->
<div class="col-md-4 col-sm-6">
<div class="feature-item">
<span class="feature__number">02</span>
<span class="flaticon-043-bank feature__icon"></span>
<h3 class="feature__title">
<a href="service-detail.html">banking investigation.</a>
</h3>
<p class="feature__desc">
sed quia lipsum dolor sit atur adipiscing elit is nunc quis
tellus sed ligula porta ultricies quis nec neulla.
</p>
</div><!-- end feature-item -->
</div><!-- end col-md-4 -->
<div class="col-md-4 col-sm-6">
<div class="feature-item">
<span class="feature__number">03</span>
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
.feature-area2 {
background-color: #233d63;
z-index: 1;
padding-top: 120px;
padding-bottom: 90px;
position: relative;
overflow: hidden; }
.feature-area2 .feature-box {
margin-top: 0; }
.feature-area2 .feature-box .feature-item {
padding: 59px 30px 38px 30px;
z-index: 1;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; }
.feature-area2 .feature-box .feature-item .feature__icon {
margin-top: 0; }
.feature-area2 .feature-box .feature-item .read__btn {
font-size: 16px;
color: #233d63;
font-weight: 600;
text-transform: capitalize;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
position: relative;
padding-right: 35px;
margin-top: 18px;
display: inline-block; }
.feature-area2 .feature-box .feature-item .read__btn .fa__arrow {
position: absolute;
right: 25px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit PRO
Hover Effect Style
Different types of hover and transition effect.
Owl Carousel Arrows on hover

Questions / Comments: