Elements - Sandal

English

- 8:00 am to 10:00 pm

### Talk to us now

+49 555 000 000

### Visit our offices

Mirage Plaza - Hamburg

### Send us an email

hello@sandal.com

### We are open all day

8:00 am to 10:00 pm daily

# 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
markup

    <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

markup

    <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

Good things happen to those who work
Good things happen to those who work
markup

    <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>

Sandal LLC.
Hamburg, Germany
One Street | Two Drive,
10th Floor, Site Wing
+49 555 000 000
hello@sandal.com
support@sandal.com

### Recent Posts

- Have faith in your abilities
  Believe in yourself! Have faith in your abilities! Without a...
- Live in the only moment
  Always continue the climb. It is possible for you to...

### Our Work

- Gaucho Cafe
- Fontaine Corp
- Saffron Magazine
- Celsius gallery
- Fidelity business
- Lighthouse Church
- Sauna Spa

### Our Values

Do not dwell in the past, do not dream of the future, concentrate the mind on now.

Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future.

Copyright © Sandal Template by arrowthemes