<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 ----------> <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 ----------> <section class="catogery container-fluid"> <div class="container"> <div class="row session-title"> <h2>Welcome To Smart Classified</h2> <p>Browse Our Top Categories</p> </div> <div class="row ro-catogery"> <div class="col-xl-2 col-lg-3 col-md-4 col-6"> <div class="cat-card"> <img src="https://www.smarteyeapps.com/demo/eye-classified/assets/images/icons/service1.png" alt=""> <h4>Mobile / Tablet</h4> <span>34456 items</span> <div class="over-lay"> <h4>Mobile / Tablet</h4> <p>34456 items</p> <a href="listing_grid.html"> <button class="btn btn-sm btn-success">View All</button> </a> </div> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-6"> <div class="cat-card"> <img src="https://www.smarteyeapps.com/demo/eye-classified/assets/images/icons/service1.png" alt=""> <h4>Vechiles</h4> <span>2346 items</span> <div class="over-lay"> <h4>Vechiles</h4> <p>34456 items</p> <a href="listing_list.html"> <button class="btn btn-sm btn-success">View All</button> </a> </div> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-6"> <div class="cat-card"> <img src="https://www.smarteyeapps.com/demo/eye-classified/assets/images/icons/service1.png" alt=""> <h4>Business / Jobs</h4> <span>64456 items</span> <div class="over-lay"> <h4>Business / Jobs</h4> <p>34456 items</p> <a href="listing_grid.html"> <button class="btn btn-sm btn-success">View All</button> </a> </div> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-6"> <div class="cat-card"> <img src="assets/images/icons/service4.png" alt=""> <h4>Pet / Animals</h4> <span>34456 items</span> <div class="over-lay"> <h4>Pet / Animals</h4> <p>34456 items</p> <a href="listing_list.html"> <button class="btn btn-sm btn-success">View All</button> </a> </div> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-6"> <div class="cat-card"> <img src="assets/images/icons/service5.png" alt=""> <h4>Watches</h4> <span>54256 items</span> <div class="over-lay"> <h4>Watches</h4> <p>34456 items</p> <a href="listing_grid.html"> <button class="btn btn-sm btn-success">View All</button> </a> </div> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-6"> <div class="cat-card"> <img src="assets/images/icons/service6.png" alt=""> <h4>Realestate</h4> <span>44456 items</span> <div class="over-lay"> <h4>Realestate</h4> <p>34456 items</p> <a href="listing_list.html"> <button class="btn btn-sm btn-success">View All</button> </a> </div> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-6"> <div class="cat-card"> <img src="assets/images/icons/service7.png" alt=""> <h4>Education </h4> <span>34456 items</span> <div class="over-lay"> <h4>Education</h4> <p>34456 items</p> <a href="listing_grid.html"> <button class="btn btn-sm btn-success">View All</button> </a> </div> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-6"> <div class="cat-card"> <img src="assets/images/icons/service8.png" alt=""> <h4>Industery / Natur</h4> <span>13342 items</span> <div class="over-lay"> <h4>Industery / Natur</h4> <p>34456 items</p> <a href="listing_list.html"> <button class="btn btn-sm btn-success">View All</button> </a> </div> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-6"> <div class="cat-card"> <img src="assets/images/icons/service9.png" alt=""> <h4>Photography</h4> <span>43543 items</span> <div class="over-lay"> <h4>Photography</h4> <p>34456 items</p> <a href="listing_grid.html"> <button class="btn btn-sm btn-success">View All</button> </a> </div> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-6"> <div class="cat-card"> <img src="assets/images/icons/service10.png" alt=""> <h4>Mobile / Tablet</h4> <span>35632 items</span> <div class="over-lay"> <h4>Mobile / Tablet</h4> <p>34456 items</p> <a href="listing_list.html"> <button class="btn btn-sm btn-success">View All</button> </a> </div> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-6"> <div class="cat-card"> <img src="assets/images/icons/service11.png" alt=""> <h4>Office Items</h4> <span>2345 items</span> <div class="over-lay"> <h4>Office Items</h4> <p>34456 items</p> <a href="listing_grid.html"> <button class="btn btn-sm btn-success">View All</button> </a> </div> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-6"> <div class="cat-card"> <img src="assets/images/icons/service12.png" alt=""> <h4> Printers</h4> <span>4564 items</span> <div class="over-lay"> <h4>Printers</h4> <p>34456 items</p> <a href="listing_list.html"> <button class="btn btn-sm btn-success">View All</button> </a> </div> </div> </div> </div> <div class=" no-margin row view-all"> <p>Didnt find what you looking for <a href="categories.html">View all Catogery</a></p> </div> </div> </section>

.catogery .ro-catogery .cat-card { background-color: #fff; padding: 25px 8px; text-align: center; box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.03), 0 1px 4px rgba(0, 0, 0, 0.04); margin-bottom: 30px; } .catogery .ro-catogery { margin-top: 30px; } .session-title { padding: 30px; margin: 0px; } .catogery .ro-catogery .cat-card img { margin-bottom: 10px; } .catogery .ro-catogery .cat-card h4 { font-weight: 700; font-size: 1rem; margin-bottom: 3px; } .catogery .ro-catogery .cat-card span { font-size: .85rem; } span { display: inline-block; } .catogery .ro-catogery .cat-card .over-lay { background-color: rgba(255, 255, 255, 0.95); width: 85%; height: 84%; top: 0px; position: absolute; margin-left: -4%; display: none; padding-top: 40px; } .catogery .ro-catogery .cat-card h4 { font-weight: 700; font-size: 1rem; margin-bottom: 3px; } .catogery .ro-catogery .cat-card .over-lay .btn { font-weight: 700; font-size: .8rem; padding-bottom: 2px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .catogery .ro-catogery .cat-card img { margin-bottom: 10px; }