<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"> <i class="fa fa-bolt 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>

.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; }