Bootstrap Snippet Hover 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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
        <div class="col-md-6 text-center">
            <div class="card">
                <i class="fa fa-bullhorn fntbckcolor" aria-hidden="true"></i>
                <h3>Title</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                <a href=""><b>Read More <i class="fa fa-angle-double-right ml-2"></i></b></a>
            </div>
            
        </div>
        <div class="col-md-6 text-center">
        <div class="card">
            <i class="fa fa-cart-arrow-down fntbckcolor" aria-hidden="true"></i>
            <h3>Title</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            
            <a href=""><b>Read More <i class="fa fa-angle-double-right ml-2"></i></b></a>
        </div>
            
        </div>
        <div class="col-md-6 text-center">
        <div class="card">
            <i class="fa fa-lightbulb-o fntbckcolor" aria-hidden="true"></i>
            <h3>Title</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <a href=""><b>Read More <i class="fa fa-angle-double-right ml-2"></i></b></a>
        </div>
            
        </div>
        <div class="col-md-6 text-center">
        <div class="card">
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
.fntbckcolor{
        background: #007b5e;
    color: #fff;
    padding: 20px;
    border-radius: 50%;
    font-size: 20px !important;
    margin: 20px 0px -10px 0px;
    width: 60px;
    height: 60px
}
.fntbckcolor:hover
{
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  -ms-transform:rotateY(360deg);
  transform: rotateY(360deg);
  cursor:pointer;
 }
a{color:#007b5e;}
a:hover{text-decoration:none;color:#007b5e;}
.card a i{display:none;}
.card a:hover i
{
    display: inline-block;
    position: absolute;
    bottom: 2px;
    right: 240px;color:#007b5e;font-weight:bold;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Hover animation"
Bootstrap 3.3.0 Snippet by ashwin1123

Related: See More

Questions / Comments:

"Hover animation" Bootstrap 3.3.0 Snippet by ashwin1123

Related: See More

Questions / Comments:

"Hover animation"
Bootstrap 3.3.0 Snippet by ashwin1123