This is a pure css and bootstrap based photo gallery to make portfolio and gallery based sites. It is smooth image galley with image hover effect, when ever visitor click on image it’ll display the full version of image with next and previous button so that you could move to next or previous images easily on lightbox form.
HTML
Fluid Layout With Overlay Effect
CSS
body { background-color: #434c50; min-height: 100vh; font: normal 16px sans-serif; padding: 40px 0; } .container.gallery-container { background-color: #fff; color: #35373a; min-height: 100vh; padding: 30px 50px; } .gallery-container h1 { text-align: center; margin-top: 50px; font-family: 'Droid Sans', sans-serif; font-weight: bold; } .gallery-container p.page-description { text-align: center; margin: 25px auto; font-size: 18px; color: #999; } .tz-gallery { padding: 40px; } /* Override bootstrap column paddings */ .tz-gallery .row > div { padding: 2px; } .tz-gallery .lightbox img { width: 100%; border-radius: 0; position: relative; } .tz-gallery .lightbox:before { position: absolute; top: 50%; left: 50%; margin-top: -13px; margin-left: -13px; opacity: 0; color: #fff; font-size: 26px; font-family: 'Glyphicons Halflings'; content: '\e003'; pointer-events: none; z-index: 9000; transition: 0.4s; } .tz-gallery .lightbox:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: rgba(46, 132, 206, 0.7); content: ''; transition: 0.4s; } .tz-gallery .lightbox:hover:after, .tz-gallery .lightbox:hover:before { opacity: 1; } .baguetteBox-button { background-color: transparent !important; } @media(max-width: 768px) { body { padding: 0; } } |
See live demo and download source code.
|
Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.
This awesome script developed by dashbouquetdevelopment. Visit their official repository for more information and follow for future updates.