"Responsive Lightbox Gallery With Popup on click with Description. NO JS. Only CSS. Any size Image fits Well. Awesome Effects."
Bootstrap 3.3.0 Snippet by nabeelkondotty

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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <section> <div class="container gal-container"> <div class="col-md-8 col-sm-12 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#1"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/1.jpg"> </a> <div class="modal fade" id="1" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/1.jpg"> </div> <div class="col-md-12 description"> <h4>This is the first one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#2"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/2.jpg"> </a> <div class="modal fade" id="2" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/2.jpg"> </div> <div class="col-md-12 description"> <h4>This is the second one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#3"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/3.jpg"> </a> <div class="modal fade" id="3" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/3.jpg"> </div> <div class="col-md-12 description"> <h4>This is the third one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#4"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/4.jpg"> </a> <div class="modal fade" id="4" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/4.jpg"> </div> <div class="col-md-12 description"> <h4>This is the fourth one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#5"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/5.jpg"> </a> <div class="modal fade" id="5" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/5.jpg"> </div> <div class="col-md-12 description"> <h4>This is the fifth one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#6"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/6.jpg"> </a> <div class="modal fade" id="6" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/6.jpg"> </div> <div class="col-md-12 description"> <h4>This is the sixth one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#7"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/7.jpg"> </a> <div class="modal fade" id="7" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/7.jpg"> </div> <div class="col-md-12 description"> <h4>This is the seventh one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#8"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/8.jpg"> </a> <div class="modal fade" id="8" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/8.jpg"> </div> <div class="col-md-12 description"> <h4>This is the eighth one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#9"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/9.jpg"> </a> <div class="modal fade" id="9" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/9.jpg"> </div> <div class="col-md-12 description"> <h4>This is the ninth one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-8 col-sm-12 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#10"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/10.jpg"> </a> <div class="modal fade" id="10" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/10.jpg"> </div> <div class="col-md-12 description"> <h4>This is the tenth one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#11"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/11.jpg"> </a> <div class="modal fade" id="11" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/11.jpg"> </div> <div class="col-md-12 description"> <h4>This is the leventh one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#12"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/12.jpg"> </a> <div class="modal fade" id="12" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/12.jpg"> </div> <div class="col-md-12 description"> <h4>This is the 12th one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#13"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/13.jpg"> </a> <div class="modal fade" id="13" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/13.jpg"> </div> <div class="col-md-12 description"> <h4>This is the 13th one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#14"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/14.jpg"> </a> <div class="modal fade" id="14" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/14.jpg"> </div> <div class="col-md-12 description"> <h4>This is the 14th one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#15"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/15.jpg"> </a> <div class="modal fade" id="15" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/15.jpg"> </div> <div class="col-md-12 description"> <h4>This is the 15th one on my Gallery</h4> </div> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6 co-xs-12 gal-item"> <div class="box"> <a href="#" data-toggle="modal" data-target="#16"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/16.jpg"> </a> <div class="modal fade" id="16" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <img src="http://nabeel.co.in/files/bootsnipp/gallery/16.jpg"> </div> <div class="col-md-12 description"> <h4>This is the 16th one on my Gallery</h4> </div> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="container"> <div class="col-md-10 col-md-offset-1 text-center"> <h6>Coded with <i class="fa fa-heart red"></i> by <a href="http://www.nabeel.co.in" target="_blank">Nabeel Kondotty</a></h6> </div> </div> </footer>
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300); body{ font-family: 'Quicksand', sans-serif; } .gal-container{ padding: 12px; } .gal-item{ overflow: hidden; padding: 3px; } .gal-item .box{ height: 350px; overflow: hidden; } .box img{ height: 100%; width: 100%; object-fit:cover; -o-object-fit:cover; } .gal-item a:focus{ outline: none; } .gal-item a:after{ content:"\e003"; font-family: 'Glyphicons Halflings'; opacity: 0; background-color: rgba(0, 0, 0, 0.75); position: absolute; right: 3px; left: 3px; top: 3px; bottom: 3px; text-align: center; line-height: 350px; font-size: 30px; color: #fff; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .gal-item a:hover:after{ opacity: 1; } .modal-open .gal-container .modal{ background-color: rgba(0,0,0,0.4); } .modal-open .gal-item .modal-body{ padding: 0px; } .modal-open .gal-item button.close{ position: absolute; width: 25px; height: 25px; background-color: #000; opacity: 1; color: #fff; z-index: 999; right: -12px; top: -12px; border-radius: 50%; font-size: 15px; border: 2px solid #fff; line-height: 25px; -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0.35); box-shadow: 0 0 1px 1px rgba(0,0,0,0.35); } .modal-open .gal-item button.close:focus{ outline: none; } .modal-open .gal-item button.close span{ position: relative; top: -3px; font-weight: lighter; text-shadow:none; } .gal-container .modal-dialogue{ width: 80%; } .gal-container .description{ position: relative; height: 40px; top: -40px; padding: 10px 25px; background-color: rgba(0,0,0,0.5); color: #fff; text-align: left; } .gal-container .description h4{ margin:0px; font-size: 15px; font-weight: 300; line-height: 20px; } .gal-container .modal.fade .modal-dialog { -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); top: 100px; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .gal-container .modal.fade.in .modal-dialog { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); opacity: 1; } @media (min-width: 768px) { .gal-container .modal-dialog { width: 55%; margin: 50 auto; } } @media (max-width: 768px) { .gal-container .modal-content{ height:250px; } } /* Footer Style */ i.red{ color:#BC0213; } .gal-container{ padding-top :75px; padding-bottom:75px; } footer{ font-family: 'Quicksand', sans-serif; } footer a,footer a:hover{ color: #88C425; }

Related: See More

Paper Dashboard Angular
Awesome Search Box
My Awesome Login Page
arrow key navigation thumbnail gallery modal view

Questions / Comments:

Hello,

If you plan implement this in bootstrap you must remove this part of the css or the lightbox will not show up :

/.gal-container .modal.fade .modal-dialog {

-webkit-transform: scale(0.1);

-moz-transform: scale(0.1);

-ms-transform: scale(0.1);

transform: scale(0.1);

top: 100px;

opacity: 0;

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

transition: all 0.3s;

}/

:)

gromatl () - 7 years ago - Reply 1

I was having trouble with it loading the Font Awesome file within my Bootstrap project.

If anyone else is, this is what I did:

I added the line 

font-family: FontAwesome;
to 
.gal-item a:after{

This problem seems to stem from adding the 

content:"\f00e";
to the :after psuedo class. Specifying that it is a FontAwesome seems to clear the issue right up.

And yes, I did change the content ID number, I am using a different version of Font Awesome. Please search for different symbols within the appropriate Font Awesome version.

keiome () - 6 years ago - Reply 0

Not sure if this is a bug, but some pictures do not resize correctly to fit within the modal, and thus require scrolling. Have you encountered this? Some of my images can resize to the modal's size, but others do not (they are all JPEGs).

sirhawkeye64 () - 7 years ago - Reply 0

Does not seem to work on local machine when code is copied. Displays images full width, and when clicked (which only the first two images appear to be links) it display a small box only, no lightbox effect.

sirhawkeye64 () - 7 years ago - Reply 0

Are you including bootstrap and jquery? Those don't show in the code, because they are assumed because this is a bootstrap snippet.

skyhighpn (-1) - 7 years ago - Reply 0

I added bootstrap and jQuery, but some functions are still not working like images are all in one column, then the lightbox works but image comes from top and black overlay not showing in the correct position. Any reasons why this has note yet been fully implemented in my page?

LuzIgnita () - 6 years ago - Reply 0

No I forgot to add that in. Thanks. It's working now on the local development machine.

sirhawkeye64 () - 7 years ago - Reply 0

I should add that it works fine on Bootsnip but not when the HTML and CSS are copied to appropriate HTML/CSS files on a local development machine. Is there something else that is referenced (perhaps some JS) that is not listed, or other CSS files?

sirhawkeye64 () - 7 years ago - Reply 0

Works great but there is a bug when you click on pictures on a small device like a smartphone

Thomas Adriaenssens () - 8 years ago - Reply 0