"Work section design with isotope js plugin"
Bootstrap 4.1.1 Snippet by Nabed

Post to Facebook Tweet this

<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 ----------> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <section class="work-area bg-light" id="work-area"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="section-heading text-center"> <h2>Our <span class="font-weight-bold">Work</span></h2> <p class="text-muted t-2">It is a long established fact that a reader will be of a page <br>when established fact looking at its layout.</p> </div> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="work-filter text-center mt-5" data-aos="fade-up" data-aos-duration="500"> <ul class="list-inline text-uppercase"> <li class="list-inline-item active" data-filter="*">All</a></li> <li class="list-inline-item" data-filter=".seo">Seo</a></li> <li class="list-inline-item" data-filter=".webdesign">Webdesign</a></li> <li class="list-inline-item" data-filter=".work">WORK</a></li> <li class="list-inline-item" data-filter=".wordpress">Wordpress</a></li> </ul> </div> </div> </div> <div class="row mt-4 work-filter-list" data-aos="fade-up" data-aos-duration="500"> <div class="col-lg-4 webdesign seo"> <div class="work-filter-item"> <div class="work-img"> <img src="https://i.postimg.cc/5tbjQQYH/1.jpg" class="img-fluid" alt="work-img"> </div> <div class="work_detail text-center"> <p class="mb-2 text-white">Category</p> <h4 class="mb-0 text-white">Project Title</h4> </div> </div> </div> <div class="col-lg-4 webdesign wordpress"> <div class="work-filter-item"> <div class="work-img"> <img src="https://i.postimg.cc/qqPvJNHv/2.jpg" class="img-fluid" alt="work-img"> </div> <div class="work_detail text-center"> <p class="mb-2 text-white">Category</p> <h4 class="mb-0 text-white">Project Title</h4> </div> </div> </div> <div class="col-lg-4 work wordpress"> <div class="work-filter-item"> <div class="work-img"> <img src="https://i.postimg.cc/nzLz081p/3.jpg" class="img-fluid" alt="work-img"> </div> <div class="work_detail text-center"> <p class="mb-2 text-white">Category</p> <h4 class="mb-0 text-white">Project Title</h4> </div> </div> </div> <div class="col-lg-4 webdesign work"> <div class="work-filter-item"> <div class="work-img"> <img src="https://i.postimg.cc/ydrNGff9/4.jpg" class="img-fluid" alt="work-img"> </div> <div class="work_detail text-center"> <p class="mb-2 text-white">Category</p> <h4 class="mb-0 text-white">Project Title</h4> </div> </div> </div> <div class="col-lg-4 seo webdesign"> <div class="work-filter-item"> <div class="work-img"> <img src="https://i.postimg.cc/zD6BScHY/5.jpg" class="img-fluid" alt="work-img"> </div> <div class="work_detail text-center"> <p class="mb-2 text-white">Category</p> <h4 class="mb-0 text-white">Project Title</h4> </div> </div> </div> <div class="col-lg-4 seo webdesign"> <div class="work-filter-item"> <div class="work-img"> <img src="https://i.postimg.cc/sDW2n45Q/6.jpg" class="img-fluid" alt="work-img"> </div> <div class="work_detail text-center"> <p class="mb-2 text-white">Category</p> <h4 class="mb-0 text-white">Project Title</h4> </div> </div> </div> </div> </div> </section> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
.work-area{ padding: 100px 0px; } .work-filter ul li{ margin: 0px 15px; cursor: pointer; } .work-filter-item{ position: relative; margin-bottom: 30px; } .work-img { position: relative; } .work-img:after { content: ""; position: absolute; left: 0; top: 0; background-color: #000; width: 100%; height: 100%; opacity: 0; transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1); } .work_detail { position: absolute; left: 0; bottom: -50px; width: 100%; opacity: 0; visibility: hidden; transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1); } .work-filter-item:hover .work-img:after{ opacity: 0.7; } .work-filter-item:hover .work_detail{ bottom: 40%; opacity: 1; visibility: visible; } .active { color: #e65f78 !important; }
$(document).ready(function(){ $(".work-filter-list").isotope(); $(".work-filter li").on('click', function(){ var selector = $(this).attr('data-filter'); $(".work-filter-list").isotope({ filter:selector }); }); })

Questions / Comments: