Elements

Lightbox

Use the data-uk-lightbox data attribute to show a popup box with an image. The lightbox utilizes the modal component to load images and videos to fit the entire modal box. You can configure the lightbox images to scroll through a gallery by setting the group parameter.

Toggle lightbox from button

View image

<a class="uk-button" href="images/demo/gallery/2.jpg" data-uk-lightbox="{group:'porfolio1'}" title="Blown away">View image</a>

Using the lightbox in a gallery

<div class="uk-grid" data-uk-grid-margin>
  <div class="uk-width-medium-1-4">
    <a href="images/demo/gallery/2.jpg" data-uk-lightbox="{group:'gallery1'}" title="Blown away">
      <img class="uk-thumbnail" src="images/demo/gallery/2.jpg" width="800" height="800" alt="image">
    </a>
  </div>

  <div class="uk-width-medium-1-4">
    <a href="images/demo/gallery/2.jpg" data-uk-lightbox="{group:'gallery1'}" title="Spectacular">
      <img class="uk-thumbnail" src="images/demo/gallery/2.jpg" width="800" height="800" alt="image">
    </a>
  </div>

  <div class="uk-width-medium-1-4">
    <a href="images/demo/gallery/2.jpg" data-uk-lightbox="{group:'gallery1'}" title="Unlock the door">
      <img class="uk-thumbnail" src="images/demo/gallery/2.jpg" width="800" height="800" alt="image">
    </a>
  </div>
</div>

Adding an overlay

To add an overlay icon to an image, use the uk-overlay-icon class

. The uk-overlay-panel class can be used to place an overlay panel that appears on hover. Additionally, you can use the following classes to animate the overlay panel:

animation	Description
uk-overlay-slide-top	slide the overlay panel in from the top
uk-overlay-slide-bottom	slide the overlay panel in from the bottom
uk-overlay-slide-left	slide the overlay panel in from the left
uk-overlay-slide-right	slide the overlay panel in from the right
uk-overlay-fade	fade in the overlay panel

The following classes can be used with the [overlay_panel] class to set the position of the overlay panel.

class	Description
uk-overlay-top	align the overlay panel to the top
uk-overlay-bottom	align the overlay panel to the bottom
uk-overlay-left	align the overlay panel to the left
uk-overlay-right	align the overlay panel to the right

<div class="uk-grid" data-uk-grid-margin>
  <div class="uk-width-medium-1-4">
    <a href="images/demo/gallery/2.jpg" data-uk-lightbox="{group:'gallery2'}" title="Blown away">
      <figure class="uk-overlay uk-overlay-hover">
        <img class="uk-thumbnail" 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>
        <div class="tm-overlay-box"></div>
      </figure>
    </a>
  </div>

  <div class="uk-width-medium-1-4">
    <a href="images/demo/gallery/2.jpg" data-uk-lightbox="{group:'gallery2'}" title="Spectacular">
      <figure class="uk-overlay uk-overlay-hover">
        <img class="uk-thumbnail" src="images/demo/gallery/2.jpg" alt="image" width="800" height="800">
        <figcaption class="uk-overlay-panel uk-overlay-background tm-overlay-content uk-overlay-top uk-overlay-slide-top ">
          your caption goes here
        </figcaption>
      </figure>
    </a>
  </div>

  <div class="uk-width-medium-1-4">
    <a href="images/demo/gallery/2.jpg" data-uk-lightbox="{group:'gallery2'}" title="Unlock the door">
      <figure class="uk-overlay uk-overlay-hover">
        <img class="uk-thumbnail uk-overlay-scale" src="images/demo/gallery/2.jpg" alt="image" width="800" height="800">
        <figcaption class="uk-overlay-panel uk-overlay-background tm-overlay-content uk-overlay-bottom uk-overlay-slide-bottom ">
          your caption goes here
        </figcaption>
      </figure>
    </a>
  </div>
</div>