Bootstrap Snippet Cards with Animation 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 ---------->
<div class="py-5 service-24">
    <div class="container">
        <!-- Row -->
        <div class="row wrap-service-24">
            <!-- Column -->
            <div class="col-lg-3 col-md-6">
                <div class="card rounded card-shadow border-0 mb-4">
                    <a href="javascript:void(0)" class="card-hover py-4 text-center d-block rounded"> 
                                                <span class="bg-success-grediant">R</span>
                        <h6 class="ser-title">Retargeting Market</h6>
                    </a>
                </div>
            </div>
            <!-- Column -->
            <!-- Column -->
            <div class="col-lg-3 col-md-6">
                <div class="card card-shadow border-0 mb-4">
                    <a href="javascript:void(0)" class="card-hover py-4 text-center d-block rounded"> 
                                                <span class="bg-success-grediant">D</span>
                        <h6 class="ser-title">Digital Marketing</h6>
                    </a>
                </div>
            </div>
            <!-- Column -->
            <!-- Column -->
            <div class="col-lg-3 col-md-6">
                <div class="card card-shadow border-0 mb-4">
                    <a href="javascript:void(0)" class="card-hover py-4 text-center d-block rounded"> 
                                                <span class="bg-success-grediant">S</span>
                        <h6 class="ser-title">SEO Techniques</h6>
                    </a>
                </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
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
.service-24 {
  font-family: "Montserrat", sans-serif;
    color: #8d97ad;
  font-weight: 300;
}
.service-24 h1, .service-24 h2, .service-24 h3, .service-24 h4, .service-24 h5, .service-24 h6 {
  color: #3e4555;
}
.service-24 .card.card-shadow {
    -webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
    box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.service-24 a {
    text-decoration: none;
}
.service-24 .card-hover:hover {
      background: #2cdd9b;
    background: -webkit-linear-gradient(legacy-direction(to right), #2cdd9b 0%, #1dc8cc 100%);
    background: -webkit-gradient(linear, left top, right top, from(#2cdd9b), to(#1dc8cc));
    background: -webkit-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
    background: -o-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
    background: linear-gradient(to right, #2cdd9b 0%, #1dc8cc 100%);
}
.service-24 .card-hover:hover .bg-success-grediant {
      color: #ffffff;
    text-fill-color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}
.service-24 .card-hover:hover .ser-title {
    color: #ffffff;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Cards with Animation"
Bootstrap 4.1.1 Snippet by saikrishna99666

Related: See More

Questions / Comments:

"Cards with Animation" Bootstrap 4.1.1 Snippet by saikrishna99666

Related: See More

Questions / Comments:

"Cards with Animation"
Bootstrap 4.1.1 Snippet by saikrishna99666