"gallery - vK"
Bootstrap 4.0.0 Snippet by vivekbisht109

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css"> <div class="container-fluid"> <div class="row"> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/PUeaHfC.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6 class="clrd-font">Italian Source Mushroom</h6> <p class="clrd-font product_price"> <i class="fa fa-usd clrd-font" aria-hidden="true"></i> 12</p> <a href="#" class="btn btn-primary">Click here</a> </div> <a class="fancybox" rel="ligthbox" href="http://i.imgur.com/PUeaHfC.png"> <div class="zoom"></div> </a> </div> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/uX3g4Nl.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6 class="clrd-font">Italian Source Mushroom</h6> <p class="clrd-font product_price"> <i class="fa fa-usd clrd-font" aria-hidden="true"></i> 12</p> <a href="#" class="btn btn-primary">Click here</a> </div> <a class="fancybox" rel="ligthbox" href="http://i.imgur.com/PUeaHfC.png"> <div class="zoom"></div> </a> </div> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/8cOtAS9.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6 class="clrd-font">Italian Source Mushroom</h6> <p class="clrd-font product_price"> <i class="fa fa-usd clrd-font" aria-hidden="true"></i> 12</p> <a href="#" class="btn btn-primary">Click here</a> </div> <a class="fancybox" rel="ligthbox" href="http://i.imgur.com/8cOtAS9.png"> <div class="zoom"></div> </a> </div> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/p7OYoBT.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6 class="clrd-font">Italian Source Mushroom</h6> <p class="clrd-font product_price"> <i class="fa fa-usd clrd-font" aria-hidden="true"></i> 12</p> <a href="#" class="btn btn-primary">Click here</a> </div> <a class="fancybox" rel="ligthbox" href="http://i.imgur.com/p7OYoBT.png"> <div class="zoom"></div> </a> </div> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/uZeTibF.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6 class="clrd-font">Italian Source Mushroom</h6> <p class="clrd-font product_price"> <i class="fa fa-usd clrd-font" aria-hidden="true"></i> 12</p> <a href="#" class="btn btn-primary">Click here</a> </div> <a class="fancybox" rel="ligthbox" href="http://i.imgur.com/uZeTibF.png"> <div class="zoom"></div> </a> </div> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/ymwlLln.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6 class="clrd-font">Italian Source Mushroom</h6> <p class="clrd-font product_price"> <i class="fa fa-usd clrd-font" aria-hidden="true"></i> 12</p> <a href="#" class="btn btn-primary">Click here</a> </div> <a class="fancybox" rel="ligthbox" href="http://i.imgur.com/ymwlLln.png"> <div class="zoom"></div> </a> </div> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/PUeaHfC.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6 class="clrd-font">Italian Source Mushroom</h6> <p class="clrd-font product_price"> <i class="fa fa-usd clrd-font" aria-hidden="true"></i> 12</p> <a href="#" class="btn btn-primary">Click here</a> </div> <a class="fancybox" rel="ligthbox" href="http://i.imgur.com/PUeaHfC.png"> <div class="zoom"></div> </a> </div> <div class="col-md-3 col-sm-4 col-xs-12 single_portfolio_text"> <img src="http://i.imgur.com/A8FRrbS.png" alt="" /> <div class="portfolio_images_overlay text-center"> <h6 class="clrd-font">Italian Source Mushroom</h6> <p class="clrd-font product_price"> <i class="fa fa-usd clrd-font" aria-hidden="true"></i> 12</p> <a href="#" class="btn btn-primary">Click here</a> </div> <a class="fancybox" rel="ligthbox" href="http://i.imgur.com/A8FRrbS.png"> <div class="zoom"></div> </a> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script> <script src="js/script.js"></script>
*{ padding:0; margin:0; -webkit-transition: 1s; transition: 1s; } .clrd-font{ background: #FF512F; background: -webkit-linear-gradient(to right, #F09819, #FF512F); background: linear-gradient(to right, #F09819, #FF512F); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .btn-primary { background-color:transparent; color: #fff; border: 2px solid #fff; font-size:20px; text-transform: uppercase; border-radius: 0px; } .btn-primary:hover { background-color:transparent; border-color: #d6962c; color: #d6962c; border-radius: 20px; } .single_portfolio_text{ display:inline-block; padding:0; position:relative; overflow:hidden; } .single_portfolio_text img{ width:100%; } .single_portfolio_text:hover .portfolio_images_overlay{ top:5%; left: 5%; } .portfolio_images_overlay{ width: 90%; height: 90%; background: rgba(0, 0, 0, 0.8); padding: 20px; margin: 0 auto; top: -100%; left: 5%; position: absolute; transition:.6s; } .portfolio_images_overlay h6{ text-transform: uppercase; color: #fff; font-size: 30px; font-weight: 900; border: 2px solid #fff; padding-top: 10px; padding-bottom: 10px; } .portfolio_images_overlay .product_price{ font-size: 35px; color: #fff; font-weight:800; line-height:30px; } .portfolio_images_overlay .product_price i{ margin-right: -10px; } .zoom{ width: 200px; height: 200px; position: absolute; bottom: -100px; right: -100px; border-radius: 50%; background: #FF512F; background: -webkit-linear-gradient(to right, #F09819, #FF512F); background: linear-gradient(to right, #F09819, #FF512F); box-shadow:0px 0px 0px 10px rgba(0,0,0,0.5); opacity:0.9; } .zoom:before { content: "\f00e"; font-family: FontAwesome; color: rgba(255, 255, 255, 0.5); font-size: 70px; padding-right: 20px; position: absolute; top: 10px; left: 30px; } @media (min-width:769px) and (max-width:991px) { .portfolio_images_overlay { padding: 0px; } } @media (max-width:768px) { .portfolio_images_overlay{ padding: 170px 20px; } } @media (max-width:580px) { .portfolio_images_overlay{ padding: 100px 20px; } } @media (max-width:480px) { .portfolio_images_overlay{ padding: 40px 20px; } } @media (max-width:320px) { .portfolio_images_overlay{ padding: 20px; } }
$(document).ready(function(){ $(".fancybox").fancybox({ openEffect: "none", closeEffect: "none" }); });

Related: See More


Questions / Comments: