<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="container"> <div class="row"> <div class="com-title"> <h2>Explore your <span>City Listings</span></h2> <p>Explore some of the best business from around the world from our partners and friends.</p> </div> <div class="col-md-6"> <a href="list-lead.html"> <div class="list-mig-like-com"> <div class="list-mig-lc-img"> <img src="http://rn53themes.net/themes/demo/directory/images/listing/home.jpg" alt=""> </div> <div class="list-mig-lc-con"> <div class="list-rat-ch list-room-rati"> <span>4.0</span> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> </div> <h5>United States</h5> <p>21 Cities . 2045 Listings . 3648 Users</p> </div> </div> </a> </div> <div class="col-md-3"> <a href="list-lead.html"> <div class="list-mig-like-com"> <div class="list-mig-lc-img"> <img src="http://rn53themes.net/themes/demo/directory/images/listing/home2.jpg" alt=""> </div> <div class="list-mig-lc-con list-mig-lc-con2"> <h5>United Kingdom</h5> <p>18 Cities . 1454 Listings</p> </div> </div> </a> </div> <div class="col-md-3"> <a href="list-lead.html"> <div class="list-mig-like-com"> <div class="list-mig-lc-img"> <img src="images/listing/home3.jpg" alt=""> </div> <div class="list-mig-lc-con list-mig-lc-con2"> <h5>Australia</h5> <p>14 Cities . 1895 Listings</p> </div> </div> </a> </div> <div class="col-md-3"> <a href="list-lead.html"> <div class="list-mig-like-com"> <div class="list-mig-lc-img"> <img src="images/listing/home4.jpg" alt=""> </div> <div class="list-mig-lc-con list-mig-lc-con2"> <h5>Germany</h5> <p>12 Cities . 1260 Listings</p> </div> </div> </a> </div> <div class="col-md-3"> <a href="list-lead.html"> <div class="list-mig-like-com"> <div class="list-mig-lc-img"> <img src="images/listing/home1.jpg" alt=""> </div> <div class="list-mig-lc-con list-mig-lc-con2"> <h5>India</h5> <p>24 Cities . 4152 Listings</p> </div> </div> </a> </div> </div> </div>

.list-mig-like { } .list-mig-like-com { position: relative; border-radius: 10px; margin-bottom: 20px; background: #14addb; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .list-mig-lc-img { } .list-mig-like-com:hover img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; opacity: 0.5; } .list-mig-lc-img img { width: 100%; border-radius: 5px; } .list-mig-like-com:before { content: ''; position: absolute; background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 10%, rgba(84, 84, 84, 0.35) 80%); top: 0px; bottom: 0px; left: 0px; width: 100%; border-radius: 5px; } .list-mig-lc-con { position: absolute; width: 100%; margin-top: -125px; padding: 20px 20px 0px 20px; display: block; } .list-mig-lc-con2 { margin-top: -90px; } .list-mig-lc-con h5 { font-size: 18px; color: #fff; padding-top: 10px; padding-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .list-mig-lc-con h6 { font-size: 14px; color: #fff; position: absolute; top: -20px; /* right: 0px; */ border: 1px solid #fff; padding: 8px 10px 3px 10px; border-radius: 18px; margin-bottom: 5px; padding-bottom: 10px; } .list-mig-lc-con p { color: #c1c1c1; font-size: 13px; } .list-mi-pr { top: 15px; } .list-ri-spec-tit { } .list-ri-spec-tit h3 { padding: 5px 20px 18px 20px; /* background: #fff; */ font-weight: 700; font-size: 16px; text-transform: uppercase; text-align: center; letter-spacing: 1px; } .list-ri-spec-tit h3 span { font-weight: 700; font-size: 16px; } .list-rat-ch { } .list-rat-ch span { width: 25px; height: 25px; background-color: #ffe500; /* bottom: 8px; */ padding: 4px; border-radius: 2px; color: #000; font-weight: 600; text-align: center; font-size: 12px; text-shadow: 0px -1px 0 rgba(0, 0, 0, 0.28); margin-right: 10px; } .list-rat-ch i { color: #000000; text-shadow: 0px -1px 0 rgba(0, 0, 0, 0.6); border: 1px solid #000; padding: 3px 2px 2px 2px; text-align: center; border-radius: 3px; background: #ffe500; font-size: 11px; } .full-btn { width: 100%; font-size: 16px; } .hom-cr-acc-check { padding: 15px 8px !important; } .hom-cr-acc-check input { } .hom-cr-acc-check label { font-size: 12px; font-weight: 500; color: #454f54; text-shadow: none; }