"Facebook stories like gallery by Ajay"
Bootstrap 3.3.0 Snippet by extrememodder

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Blur Gallery - Ajay</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <div class="row"> <div class="col-md-3"> <a class="item showDetails"> <img src="https://mondrian.mashable.com/wp-content%252Fgallery%252Flamborghini-centenario%252Fcentenario_01_high-2.jpg%252Ffit-in__850x850.jpg?signature=tXevL1UhWOQ-oWTSV6MnNgROMbo=&source=https%3A%2F%2Fmashable.com"> </a> </div> <div class="col-md-3"> <a class="item showDetails"> <img src="https://hips.hearstapps.com/hmg-prod/amv-prod-cad-assets/images/16q2/667349/2016-lamborghini-aventador-lp750-4-superveloce-test-review-car-and-driver-photo-667354-s-original.jpg?fill=2:1&resize=480:*"> </a> </div> <div class="col-md-3"> <a class="item showDetails"> <img src="https://editorial.pxcrush.net/carsales/general/editorial/lamborghini-huracan-evo-ii-y6bd-2sbf.jpg?width=1024&height=683"> </a> </div> <div class="col-md-3"> <a class="item showDetails"> <img src="http://www.lambocars.com/lambonews/superleggera_on_pur_8ight_wheels_600.jpg"> </a> </div> </div> <div id="detailsDiv"> <div class="carousel slide article-slide" id="myCarousel"> <div class="carousel-inner cont-slider"> <div style="position: relative;"> <input type="button" id="btnClose" name="btnClose" class="btn btn-danger" value="Close"> </div> <div class="item active"> <div class="profile"> <img src="https://mondrian.mashable.com/wp-content%252Fgallery%252Flamborghini-centenario%252Fcentenario_01_high-2.jpg%252Ffit-in__850x850.jpg?signature=tXevL1UhWOQ-oWTSV6MnNgROMbo=&source=https%3A%2F%2Fmashable.com" alt="" class="profile__bg-img"> <div class="profile__overlay"></div> <img src="https://mondrian.mashable.com/wp-content%252Fgallery%252Flamborghini-centenario%252Fcentenario_01_high-2.jpg%252Ffit-in__850x850.jpg?signature=tXevL1UhWOQ-oWTSV6MnNgROMbo=&source=https%3A%2F%2Fmashable.com" alt="" class="profile__main-img"> </div> </div> <div class="item"> <div class="profile"> <img src="https://hips.hearstapps.com/hmg-prod/amv-prod-cad-assets/images/16q2/667349/2016-lamborghini-aventador-lp750-4-superveloce-test-review-car-and-driver-photo-667354-s-original.jpg?fill=2:1&resize=480:*" alt="" class="profile__bg-img"> <div class="profile__overlay"></div> <img src="https://hips.hearstapps.com/hmg-prod/amv-prod-cad-assets/images/16q2/667349/2016-lamborghini-aventador-lp750-4-superveloce-test-review-car-and-driver-photo-667354-s-original.jpg?fill=2:1&resize=480:*" alt="" class="profile__main-img"> </div> </div> <div class="item"> <div class="profile"> <img src="https://editorial.pxcrush.net/carsales/general/editorial/lamborghini-huracan-evo-ii-y6bd-2sbf.jpg?width=1024&height=683" alt="" class="profile__bg-img"> <div class="profile__overlay"></div> <img src="https://editorial.pxcrush.net/carsales/general/editorial/lamborghini-huracan-evo-ii-y6bd-2sbf.jpg?width=1024&height=683" alt="" class="profile__main-img"> </div> </div> <div class="item"> <div class="profile"> <img src="http://www.lambocars.com/lambonews/superleggera_on_pur_8ight_wheels_600.jpg" alt="" class="profile__bg-img"> <div class="profile__overlay"></div> <img src="http://www.lambocars.com/lambonews/superleggera_on_pur_8ight_wheels_600.jpg" alt="" class="profile__main-img"> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!-- Indicators --> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#myCarousel"> <img alt="" title="" src="https://mondrian.mashable.com/wp-content%252Fgallery%252Flamborghini-centenario%252Fcentenario_01_high-2.jpg%252Ffit-in__850x850.jpg?signature=tXevL1UhWOQ-oWTSV6MnNgROMbo=&source=https%3A%2F%2Fmashable.com"> </li> <li data-slide-to="1" data-target="#myCarousel"> <img alt="" title="" src="https://hips.hearstapps.com/hmg-prod/amv-prod-cad-assets/images/16q2/667349/2016-lamborghini-aventador-lp750-4-superveloce-test-review-car-and-driver-photo-667354-s-original.jpg?fill=2:1&resize=480:*"> </li> <li data-slide-to="2" data-target="#myCarousel"> <img alt="" title="" src="https://editorial.pxcrush.net/carsales/general/editorial/lamborghini-huracan-evo-ii-y6bd-2sbf.jpg?width=1024&height=683"> </li> <li data-slide-to="2" data-target="#myCarousel"> <img alt="" title="" src="http://www.lambocars.com/lambonews/superleggera_on_pur_8ight_wheels_600.jpg"> </li> </ol> </div> </div> </body> </html>
.profile { height: 100%; margin: 0 auto; } .profile__bg-img { top: 0; left: 0; height: 100vh; width: 100%; background-color: #000; -webkit-filter: blur(4px); filter: blur(4px); -o-object-fit: cover; object-fit: cover; background-position: center center; } .profile__overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.4); -webkit-filter: blur(4px); filter: blur(4px); z-index: 10; } .profile__main-img { max-width: 600px; width: 90%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: auto; border-radius: 5%; -o-object-fit: contain; object-fit: contain; z-index: 20; box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.2); background-color: rgba(255, 255, 255, 1.0); } #detailsDiv { display: none; width: 100%; height: 100%; } #detailsDiv { position: fixed; top: 0; left: 0; z-index: 999; } #btnClose { position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; -webkit-transform: translatey(18%); transform: translatey(18%); height: auto; max-width: 100px; width: 100%; border-radius: 10px; z-index: 20; box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.2); outline: none; } #myCarousel .carousel-indicators { bottom: 0; } #myCarousel .carousel-indicators li { border: medium none; border-radius: 0; height: auto; margin-bottom: 5px; margin-left: 0; margin-right: 5px !important; margin-top: 0; width: 80px; } #myCarousel .carousel-indicators img { border: 2px solid #FFFFFF; float: left; height: auto; left: 0; width: 80px; } #myCarousel .carousel-indicators .active img { border: 2px solid #39b3d7; } .showDetails img { width: 100%; height: auto; } @media screen and (max-width:576px){ .profile__main-img { max-width: 400px; } } @media screen and (max-width:320px){ .profile__main-img { max-width: 200px; } }
$(document).ready(function() { $(document).on('click','.showDetails',function() { $('#detailsDiv').show(); }); $("#btnClose").click(function() { $('#detailsDiv').hide(); }); });

Related: See More

Material Kit
arrow key navigation thumbnail gallery modal view
masonry Image Gallery
Portfolio Gallery with filtering category

Questions / Comments: