<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 ---------->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<title>card hover effects</title>
</head>
<body>
<div class="card">
<h1 style="text-align:center;font-family:font-weight:bold;font-variant:small-caps;font-size:45px;line-height:1.5em;">Card Hover Effect</h1>
<p style="text-align:center;line-height:2;font-size:14px;font-variant:small-caps;color:gray;text-decoration:underline">amzing card hover effect, card bottom white box mouse pointer and see magic</p>
<div class="col-lg-12">
<div class="cardbox">
<div class="col-lg-3">
<div class="box">
<div class="img-bx">
<img src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-8.jpeg" class="img-responsive">
</div>
<div class="content">
<h3>Card One</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. It has survived not only five centuries</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="box">
<div class="img-bx">
<img src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-6.jpeg" class="img-responsive">
</div>
<div class="content">
<h3>Card Two</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. It has survived not only five centuries</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="box">
<div class="img-bx">
<img src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-2.jpeg" class="img-responsive">
</div>
<div class="content">
<h3>Card Three</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. It has survived not only five centuries</p>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="box">
<div class="img-bx">
<img src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-4.jpeg" class="img-responsive">
</div>
<div class="content">
<h3>Card Four</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. It has survived not only five centuries</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
