"Portfolio using mixitup with lightbox"
Bootstrap 3.3.0 Snippet by mtechweb

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.css"> </head> <body> <section class="portfolio padding-style1" id="portfolio"> <h2 class="section-title text-center">portofilio using mixitup</h2> <div class="portfolio-content"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="portfolio-content-head"> <ul class="controls"> <li class="filter" data-filter="all">ALL</li> <li class="filter" data-filter=".design">DESIGN</li> <li class="filter" data-filter=".development">DEVELOPMENT</li> <li class="filter" data-filter=".plugin">BOOTSTARP</li> <li class="filter" data-filter=".photography">WORDPRESS</li> </ul> </div> </div> <div class="col-md-12 col-sm-12 col-xs"> <div class="portfolio-content-items"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12 mix design"> <div class="portfolio-item"> <div class="portfolio-img"> <img src="https://cdn.pixabay.com/photo/2017/03/23/19/57/asparagus-2169305_960_720.jpg" alt="portfolio" class="img-responsive"> </div> <div class="portfolio-overlay"> <div class="overlay-content"> <p class="category">DESIGN</p> <a href="#"> <div class="magnify-icon"> <p><span><i class="fa fa-link" aria-hidden="true"></i></span></p> </div> </a> <a href="https://cdn.pixabay.com/photo/2017/03/23/19/57/asparagus-2169305_960_720.jpg" data-lightbox="image-1"> <div class="magnify-icon"> <p><span><i class="fa fa-search" aria-hidden="true"></i></span></p> </div> </a> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12 mix plugin"> <div class="portfolio-item"> <div class="portfolio-img"> <img src="https://cdn.pixabay.com/photo/2017/03/23/19/57/asparagus-2169305_960_720.jpg" alt="portfolio" class="img-responsive"> </div> <div class="portfolio-overlay"> <p class="category">WEB DEVELOPMENT</p> <a href="#"> <div class="magnify-icon"> <p><span><i class="fa fa-link" aria-hidden="true"></i></span></p> </div> </a> <a href="image/2.jpg" data-lightbox="image-2"> <div class="magnify-icon"> <p><span><i class="fa fa-search" aria-hidden="true"></i></span></p> </div> </a> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12 mix photography"> <div class="portfolio-item"> <div class="portfolio-img"> <img src="https://cdn.pixabay.com/photo/2017/03/23/19/57/asparagus-2169305_960_720.jpg" alt="portfolio" class="img-responsive"> </div> <div class="portfolio-overlay"> <p class="category">WORDPRESS DEVELOPMENT</p> <a href="#"> <div class="magnify-icon"> <p><span><i class="fa fa-link" aria-hidden="true"></i></span></p> </div> </a> <a href="https://cdn.pixabay.com/photo/2017/03/23/19/57/asparagus-2169305_960_720.jpg" data-lightbox="image-3"> <div class="magnify-icon"> <p><span><i class="fa fa-search" aria-hidden="true"></i></span></p> </div> </a> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12 mix plugin"> <div class="portfolio-item"> <div class="portfolio-img"> <img src="https://cdn.pixabay.com/photo/2017/03/23/19/57/asparagus-2169305_960_720.jpg" alt="portfolio" class="img-responsive"> </div> <div class="portfolio-overlay"> <p class="category">PSD TO WORDPRESS</p> <a href="#"> <div class="magnify-icon"> <p><span><i class="fa fa-link" aria-hidden="true"></i></span></p> </div> </a> <a href="https://cdn.pixabay.com/photo/2017/03/23/19/57/asparagus-2169305_960_720.jpg" data-lightbox="image-4"> <div class="magnify-icon"> <p><span><i class="fa fa-search" aria-hidden="true"></i></span></p> </div> </a> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12 mix design"> <div class="portfolio-item"> <div class="portfolio-img"> <img src="https://cdn.pixabay.com/photo/2017/03/23/19/57/asparagus-2169305_960_720.jpg" alt="portfolio" class="img-responsive"> </div> <div class="portfolio-overlay"> <p class="category">BOOTSTARP DESIGN</p> <a href="#"> <div class="magnify-icon"> <p><span><i class="fa fa-link" aria-hidden="true"></i></span></p> </div> </a> <a href="image/2.jpg" data-lightbox="image-5"> <div class="magnify-icon"> <p><span><i class="fa fa-search" aria-hidden="true"></i></span></p> </div> </a> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12 mix development"> <div class="portfolio-item"> <div class="portfolio-img"> <img src="https://cdn.pixabay.com/photo/2017/03/23/19/57/asparagus-2169305_960_720.jpg" alt="portfolio" class="img-responsive"> </div> <div class="portfolio-overlay"> <p class="category">DEVELOPMENT</p> <a href="#"> <div class="magnify-icon"> <p><span><i class="fa fa-link" aria-hidden="true"></i></span></p> </div> </a> <a href="image/2.jpg" data-lightbox="image-6"> <div class="magnify-icon"> <p><span><i class="fa fa-search" aria-hidden="true"></i></span></p> </div> </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <script> https://cdnjs.cloudflare.com/ajax/libs/mixitup/2.1.11/jquery.mixitup.min.js https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.js </script> </body> </html>
.portfolio-content-head ul li { display: inline-block; cursor: pointer; padding: 12px 14px; font-weight: 700; color: #696969; margin: 0px 10px; transition: all 0.2s; font-size: 16px; } .portfolio-content-head ul li:hover { color: #50977f; } .mixitup-control-active { color: #50977f!important; } .mix { display: inline-block; } .portfolio-item { position: relative; } .portfolio-content-items .row { margin-right: 0px; margin-left: 0px; } .portfolio-content-items .col-md-4, .portfolio-content-item .col-sm-4 { padding-right: 0px; padding-left: 0px; } .portfolio-img { position: relative; z-index: 1; transition: all 0.5s; overflow: hidden; } .portfolio-img img { transition: all 0.5s; } .portfolio-content-head { text-align: center; margin-bottom: 28px; } .portfolio-item:hover .portfolio-img img { transform: rotate(10deg) scale(1.4); } .portfolio-content { padding-top: 22px; } .portfolio-overlay { position: absolute; z-index: 2; top: 0; background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; text-align: center; visibility: hidden; transition: all 0.5s; transform: scale(0); } .portfolio-overlay p, .portfolio-overlay a { position: relative; z-index: 4; } .portfolio-overlay::before { content: ""; width: 0; height: 0; border-width: 0; position: absolute; left: 10%; top: 10%; transition: 50ms height ease 150ms; z-index: 3; } .portfolio-overlay::after { content: ""; width: 0; height: 0; border-width: 0; position: absolute; right: 10%; bottom: 10%; transition: 100ms width ease 200ms; z-index: 3; } .portfolio-item:hover .portfolio-overlay::before { width: 80%; height: 80%; border-top: 1px solid #50977f; border-right: 1px solid #50977f; transition: width 0.1s ease 0.3s, height 0.1s ease 0.5s; } .portfolio-item:hover .portfolio-overlay::after { width: 80%; height: 80%; border-bottom: 1px solid #50977f; border-left: 1px solid #50977f; transition: width 0.1s ease 0.6s, height 0.1s ease 0.7s; } .portfolio-item:hover .portfolio-overlay { visibility: visible; transform: scale(1); } .portfolio-overlay .category { margin-top: 90px; margin-bottom: 19px; font-size: 16px; color: #fff; font-weight: 500; } .portfolio-overlay .magnify-icon { height: 40px; width: 40px; border-radius: 20px; background: #50977f; margin: 0 5px; cursor: pointer; display: inline-block; transition: all 0.25s; } .portfolio-overlay .magnify-icon:hover { background: #50977f; } .portfolio-overlay .magnify-icon p span i { font-size: 15px; color: #fff; line-height: 40px; cursor: pointer; }
/* lightbox */ lightbox.option({ 'resizeDuration': 200, 'wrapAround': true, showImageNumberLabel: false, }); /* Mixit Up */ var portfolioContent = $('.portfolio-content'); portfolioContent.mixItUp(); // map var map = new GMaps({ el: '#map', lat: -12.043333, lng: -77.028333 });

Related: See More

Vue Argon Design System
Portfolio Gallery with filtering category
Social-network style lightbox
Bootstrap Lightbox

Questions / Comments: