Ekko Lightbox for Bootstrap and WordPress Example SCSS

ekko-lightbox-gallery-example.scss

/* Default gallery styles */
.gallery:after {
    content: '';
    display: table;
    clear: both;
}

img.aligncenter, div.aligncenter, figure.aligncenter, img.wp-post-image {display:block; margin:1em auto;}
img.alignright, div.alignright, figure.alignright {float:right; margin:1em 0 1em 2em;}
img.alignleft, div.alignleft, figure.alignleft, img.wp-post-image.attachment-thumb {float:left; margin:1em 1em 2em 0;}
figure {max-width: 100%; height: auto; margin:0;}
p img.alignright, p img.alignleft {margin-top:0;}

.gallery figure img {max-width:100%; height:auto; margin:0 auto; display:block;}

.gallery figure {float:left; margin:0 2% 1em 0;}

.gallery.gallery-columns-1 figure {width:100%; margin:0 0 1em 0; float:none;}

.gallery.gallery-columns-2 figure {width:49%;}
.gallery.gallery-columns-2 figure:nth-of-type(even) {margin-right:0;}
.gallery.gallery-columns-2 figure:nth-of-type(odd) {clear:left;}

.gallery.gallery-columns-3 figure {width:32%;}
.gallery.gallery-columns-3 figure:nth-of-type(3n+3) {margin-right:0;}
.gallery.gallery-columns-3 figure:nth-of-type(3n+4) {clear:left;}

.gallery.gallery-columns-4 figure {width:23.25%;}
.gallery.gallery-columns-4 figure:nth-of-type(4n+4) {margin-right:0;}
.gallery.gallery-columns-4 figure:nth-of-type(4n+5) {clear:left;}

.gallery.gallery-columns-5 figure {width:18%;}
.gallery.gallery-columns-5 figure:nth-of-type(5n+5) {margin-right:0;}
.gallery.gallery-columns-5 figure:nth-of-type(5n+6) {clear:left;}

.gallery.gallery-columns-6 figure {width:14.2%;}
.gallery.gallery-columns-6 figure:nth-of-type(6n+6) {margin-right:0;}
.gallery.gallery-columns-6 figure:nth-of-type(6n+7) {clear:left;}

.gallery.gallery-columns-7 figure {width:12%;}
.gallery.gallery-columns-7 figure:nth-of-type(7n+7) {margin-right:0;}
.gallery.gallery-columns-7 figure:nth-of-type(7n+8) {clear:left;}

.gallery.gallery-columns-8 figure {width:10.2%;}
.gallery.gallery-columns-8 figure:nth-of-type(8n+8) {margin-right:0;}
.gallery.gallery-columns-8 figure:nth-of-type(8n+9) {clear:left;}

.gallery.gallery-columns-9 figure {width:8.85%;}
.gallery.gallery-columns-9 figure:nth-of-type(9n+9) {margin-right:0;}
.gallery.gallery-columns-9 figure:nth-of-type(9n+10) {clear:left;}

@media (max-width: 768px) {
    img.alignright, div.alignright, figure.alignright, img.alignleft, div.alignleft, figure.alignleft, img.wp-post-image.attachment-thumb {display: block;
        margin: 1em auto;
        float:none;
    }
    .gallery.gallery-columns-4 figure, .gallery.gallery-columns-5 figure, .gallery.gallery-columns-6 figure, .gallery.gallery-columns-7 figure, .gallery.gallery-columns-8 figure, .gallery.gallery-columns-9 figure {
        width: 100%;
        margin: 0 0 1em 0;
        float:none;
    }
}

@media (max-width: 768px) {
    .gallery.gallery-columns-3 figure {
        width: 100%;
    }
}

/* Gallery image sizing */
.gallery-item {
    margin:0px;
    padding:0 5px 10px;
    cursor:pointer;
    min-height:1px;
    -webkit-column-break-inside: avoid;
    backface-visibility: hidden;
}
.gallery-icon a {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    position: relative;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    padding-top: 100%;
    &:not(.image-save-button) {
        &:after {
            content: 'VIEW IMAGE';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            width: 100%;
            text-align: center;
            color: #ffffff;
            visibility: hidden;
            opacity: 0;
        }
    }
    &:hover {
        &:after {
            visibility: visible;
            opacity: 1;
        }
    }
    img {
        display: none;
    }
}

figcaption {
    padding-top: 15px;
    font-size: 11px;
    line-height: 12px;
}
.image-save-button {
    z-index: 10;
    background-color: #ffffff;
    color: $brown;
    padding: 5px 20px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid $brown;
    transition: all .5s;
    &:hover {
        background-color: $brown;
        color: #ffffff;
        border: 1px solid $light-brown;
        text-decoration: none;
    }
}

.save-wrapper {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50px;
    width: 100%;
    text-align: center;
    a {
        position: relative;
        width: auto;
        height: auto;
        padding: 5px 20px;
        margin: 0 auto;
    }
}

.image-hovered {
    filter: brightness(0.8);
}
.image-hovered.save-wrapper {
    visibility: visible;
    opacity: 1;
    filter: unset;
}

.content-section:last-child a.scroller-inverted {
    display: none;
}

/* Ekko lightbox modal styles */
.ekko-lightbox{display:-ms-flexbox!important;display:flex!important;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-right:0!important}.ekko-lightbox-container{position:relative}.ekko-lightbox-container>div.ekko-lightbox-item{position:absolute;top:0;left:0;bottom:0;right:0;width:100%}.ekko-lightbox iframe{width:100%;height:100%}.ekko-lightbox-nav-overlay{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex}.ekko-lightbox-nav-overlay a{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0;transition:opacity .5s;color:#fff;font-size:30px;z-index:1}.ekko-lightbox-nav-overlay a>*{-ms-flex-positive:1;flex-grow:1}.ekko-lightbox-nav-overlay a>:focus{outline:none}.ekko-lightbox-nav-overlay a span{padding:0 30px}.ekko-lightbox-nav-overlay a:last-child span{text-align:right}.ekko-lightbox-nav-overlay a:hover{text-decoration:none}.ekko-lightbox-nav-overlay a:focus{outline:none}.ekko-lightbox-nav-overlay a.disabled{cursor:default;visibility:hidden}.ekko-lightbox a:hover{opacity:1;text-decoration:none}.ekko-lightbox .modal-dialog{display:none}.ekko-lightbox .modal-footer{text-align:left}.ekko-lightbox-loader{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.ekko-lightbox-loader>div{width:40px;height:40px;position:relative;text-align:center}.ekko-lightbox-loader>div>div{width:100%;height:100%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;animation:a 2s infinite ease-in-out}.ekko-lightbox-loader>div>div:last-child{animation-delay:-1s}.modal-dialog .ekko-lightbox-loader>div>div{background-color:#333}@keyframes a{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}

.modal-header {
    background-color: transparent;
    position: absolute;
    top: 19px;
    right: 19px;
    z-index: 1050;
    height: 20px;
    border: none;
    button.close {
        background-image: url(images/close-button.png);
        background-size: contain;
        width: 26px;
        height: 26px;
        span {
            display: none;
        }
    }
}
.modal-body {
    padding: 0.4rem;
}
.ekko-lightbox .modal-footer {
    text-align: left;
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    left: 0;
    right: 0;
    color: #fff;
    flex-direction: column;
    padding: 1rem 0.5rem 0.5rem 0.5rem;
    margin: 0 0.4rem 0.4rem 0.4rem;
    border-top: 0px;
   h2 {
        text-align: left;
        width: 100%;
        line-height: 1.2em;
        font-size: 28px;
   }
   p {
        text-align: left;
        width: 100%;
        line-height: 1.2em;
        padding-top: 4px;
        margin-bottom: 0;
   }
}