Pages

If you can dream it, you can do it

4 Column Gallery

show code

<div class="uk-grid uk-grid-width-medium-1-2 uk-grid-width-large-1-4" data-uk-grid-margin> <a href="images/demo/gallery/1.jpg" data-uk-lightbox="{group:'gallery1'}" title="Celsius HTML Template"> <figure class="uk-overlay uk-overlay-hover"> <img class="uk-overlay-scale" src="images/demo/gallery/1.jpg" alt="image" width="800" height="800"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-overlay-icon"></div> </figure> </a> <a href="images/demo/gallery/2.jpg" data-uk-lightbox="{group:'gallery1'}" title="Celsius HTML Template"> <figure class="uk-overlay uk-overlay-hover"> <img class="uk-overlay-scale" src="images/demo/gallery/2.jpg" alt="image" width="800" height="800"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-overlay-icon"></div> </figure> </a> <a href="images/demo/gallery/3.jpg" data-uk-lightbox="{group:'gallery1'}" title="Celsius HTML Template"> <figure class="uk-overlay uk-overlay-hover"> <img class="uk-overlay-scale" src="images/demo/gallery/3.jpg" alt="image" width="800" height="800"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-overlay-icon"></div> </figure> </a> <a href="images/demo/gallery/4.jpg" data-uk-lightbox="{group:'gallery1'}" title="Celsius HTML Template"> <figure class="uk-overlay uk-overlay-hover"> <img class="uk-overlay-scale" src="images/demo/gallery/4.jpg" alt="image" width="800" height="800"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-overlay-icon"></div> </figure> </a> </div>
demo