<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <section class="card"> <div class="container"> <div class="row"> <h3 class="text-center">Bootstrap 4 card with Hover Effect</h3> </div> <div class="row"> <div class="col-sm-4"> <div class="card-section"> <div class="card-section-image"> <a href="#"> <img src="http://www.ecologytheme.com/theme/eduwise/images/courses/courses_1.jpg" class="img-fluid"> </a> <div class="card-purchase"> <a>$ 150</a> </div> </div> <div class="card-desc"> <div class="title"> <h3>Card Panel</h3> </div> <div class="card-info"> <ul class="list-unstyle"> <li><i class="far fa-calendar-alt"></i> 130 Dyas</li> <li><i class="far fa-user"></i> Admin</li> </ul> <a href="" class="cart_btn btn btn-dark">Read More..</a> </div> </div> </div> </div> <div class="col-sm-4"> <div class="card-section"> <div class="card-section-image"> <a href="#"> <img src="http://www.ecologytheme.com/theme/eduwise/images/courses/courses_1.jpg" class="img-fluid"> </a> <div class="card-purchase"> <a>$ 150</a> </div> </div> <div class="card-desc"> <div class="title"> <h3>Card Panel</h3> </div> <div class="card-info"> <ul class="list-unstyle"> <li><i class="far fa-calendar-alt"></i> 130 Dyas</li> <li><i class="far fa-user"></i> Admin</li> </ul> <a href="" class="cart_btn btn btn-dark">Read More..</a> </div> </div> </div> </div> <div class="col-sm-4"> <div class="card-section"> <div class="card-section-image"> <a href="#"> <img src="http://www.ecologytheme.com/theme/eduwise/images/courses/courses_1.jpg" class="img-fluid"> </a> <div class="card-purchase"> <a>$ 150</a> </div> </div> <div class="card-desc"> <div class="title"> <h3>Card Panel</h3> </div> <div class="card-info"> <ul class="list-unstyle"> <li><i class="far fa-calendar-alt"></i> 130 Dyas</li> <li><i class="far fa-user"></i> Admin</li> </ul> <a href="" class="cart_btn btn btn-dark">Read More..</a> </div> </div> </div> </div> </div> </div> </section>

.card{background:#fff; padding:120px 0 80px; position:relative; border:1px solid #ddd} .card .card-section{background:#fff; margin-bottom:20px; box-shadow:0px 0px 81px 0 rgba(47,47,47,0.1); transition:all .3s ease-in-out;} .card .card-section-image{position:relative;overflow:hidden} .card .card-section-image img{width:100%; height:auto; transition:all .3s ease-in-out; transform: scale(1.06) rotate(0deg);} .card .card-section:hover .card-section-image img{transform:scale(1.1) rotate(4deg);} .card .card-section-image .card-purchase{position:absolute;text-align:right;right:0; bottom:0;width:100%; } .card .card-section-image .card-purchase a{background:green; color:#fff; font-size:14px; text-decoration:none; padding:5px 25px; display: inline-block; } .card .card-section .card-desc{padding:30px;} .card .card-section .card-desc .title h3{font-size:24px;} .card .card-section .card-desc .title h3 a{color:#333; text-decoration:0; } .card .card-section .card-desc .card-info{display:flex; justify-content:space-between; align-items:center;padding:10px 0} .card .card-section .card-desc .card-info .list-unstyle{list-style:none; padding-left:0} .card .card-section .card-desc .card-info ul{margin-bottom:6px} .card .card-section .card-desc .card-info ul li{color:#333; font-size:16px; margin-bottom:6px} .cart_btn { background: #333; font-weight: 500; border-radius: 0; color: #ffffff; font-family: "Rubik", sans-serif; display: inline-block; font-size: 12px; text-transform: uppercase; text-decoration: none; height: 36px; line-height: 36px; padding: 0 20px; transition: all 0.3s ease-in-out;