# Overlay

Create an image overlay, which comes in different styles.

## Usage

This component is easily applied. To create a position context, add the `.uk-overlay` class to a container element around an image. Add the `.uk-overlay-panel` class to a child element to create the actual overlay panel. Usually you would use a `<figure` and `<figcaption>` element for this.

### Example

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

### Markup

    <figure class="uk-overlay">
        <img src="" width="" height="" alt="">
        <figcaption class="uk-overlay-panel">...</figcaption>
    </figure>

## Toggle overlay on hover

By default, the overlay is always visible. To hide the overlay and display it on hover, add the `.uk-overlay-hover` class to the overlay container.

### Example

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

    <figure class="uk-overlay uk-overlay-hover">
        <img src="" width="" height="" alt="">
        <figcaption class="uk-overlay-panel">...</figcaption>
    </figure>

### Toggle on active

To toggle an overlay when its parent container is in an active state, add the `.uk-overlay-active` class. This comes in handy, for example, in combination with the Slideshow component.

## Overlay background

To give the overlay a background just add the `.uk-overlay-background` class to the overlay container.

### Example

### Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

### Markup

    <figure class="uk-overlay">
        <img src="" width="" height="" alt="">
        <figcaption class="uk-overlay-panel uk-overlay-background">...</figcaption>
    </figure>

## Overlay position

By default, the overlay covers its entire parent container from the top left. To position and crop the overlay, add one of the following classes to the overlay panel.

Class | Description
--- | ---
`.uk-overlay-top` | Add this class to align the overlay to the top.
`.uk-overlay-bottom` | Add this class to align the overlay to the bottom.
`.uk-overlay-left` | Add this class to align the overlay to the left.
`.uk-overlay-right` | Add this class to align the overlay to the right.

### Example

- ### Overlay Top

  Lorem ipsum dolor sit amet.

- ### Overlay Bottom

  Lorem ipsum dolor sit amet.

- ### Overlay Left

  Lorem ipsum dolor sit amet.

- ### Overlay Right

  Lorem ipsum dolor sit amet.

### Markup

    <figure class="uk-overlay">
        <img src="" width="" height="" alt="">
        <figcaption class="uk-overlay-panel uk-overlay-top">...</figcaption>
    </figure>

## Overlay icon

It is possible to put basically any content into your overlay. But you can also add the `.uk-overlay-icon` class to the overlay panel, so it will display an icon instead.

### Example

### Markup

    <figure class="uk-overlay">
        <img src="" width="" height="" alt="">
        <div class="uk-overlay-panel uk-overlay-icon"></div>
    </figure>

## Overlay image

To apply an image as an overlay, add the `.uk-overlay-image` class to an `<img>` element with the `.uk-overlay-panel` class.

### Example

### Markup

    <figure class="uk-overlay uk-overlay-hover">
        <img src="" width="" height="" alt="">
        <img class="uk-overlay-panel uk-overlay-image" src="" width="" height="" alt="">
    </figure>

## Overlay transitions

Overlay panels and images can easily be animated. Just add one of the following classes to the overlay panel or `<img>` element. Note, that this only works in combination with the `.uk-overlay-hover` or `.uk-overlay-active` class.

Class | Description
--- | ---
`.uk-overlay-slide-top` | Add this class to the overlay panel to slide it in from the top.
`.uk-overlay-slide-bottom` | Add this class to the overlay panel to slide it in from the bottom.
`.uk-overlay-slide-left` | Add this class to the overlay panel to slide it in from the left.
`.uk-overlay-slide-right` | Add this class to the overlay panel to slide it in from the right.
`.uk-overlay-fade` | Add this class to the overlay panel or image to fade it in.
`.uk-overlay-scale` | Add this class to the image to scale it up.
`.uk-overlay-spin` | Add this class to the image to slightly rotate it to the right.
`.uk-overlay-grayscale` | Add this class to the image to desaturate it and color it on hover.

NOTE If you'd like to animate the image, but want the overlay panel to be visible at all times, just add the `.uk-ignore` class to the panel. That way it will be displayed despite the `.uk-overlay-hover` class.

### Example

- Lorem ipsum dolor sit amet.

- Lorem ipsum dolor sit amet.

- Lorem ipsum dolor sit amet.

### Markup

    <!-- This example is sliding in the overlay panel from the top -->
    <figure class="uk-overlay uk-overlay-hover">
        <img src="" width="" height="" alt="">
        <figcaption class="uk-overlay-panel uk-overlay-slide-top">...</figcaption>
    </figure>

    <!-- This example is scaling up the image while the overlay panel always remains visible -->
    <figure class="uk-overlay uk-overlay-hover">
        <img class="uk-overlay-scale" src="" width="" height="" alt="">
        <figcaption class="uk-overlay-panel uk-ignore">...</figcaption>
    </figure>

    <!-- This example is spinning the image and sliding in the overlay panel from the bottom -->
    <figure class="uk-overlay uk-overlay-hover">
        <img class="uk-overlay-spin" src="" width="" height="" alt="">
        <figcaption class="uk-overlay-panel uk-overlay-slide-top">...</figcaption>
    </figure>

## Overlay and flex

You can use the Flex component to align the overlay vertically and horizontally without cropping it.

### Example

- ### Title

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

- ### Title

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

### Markup

    <!-- In this example the overlay panel is centered vertically and horizontally -->
    <figure class="uk-overlay">
        <img src="" width="" height="" alt="">
        <figcaption class="uk-overlay-panel uk-flex uk-flex-center uk-flex-middle uk-text-center">
            <div>...</div>
        </figcaption>
    </figure>

    <!-- In this example the overlay panel is aligned to the bottom -->
    <figure class="uk-overlay">
        <img src="" width="" height="" alt="">
        <figcaption class="uk-overlay-panel uk-flex uk-flex-bottom">
            <div>...</div>
        </figcaption>
    </figure>

## Overlay anchor

To use the entire overlay as a link, just place an `<a>` element inside the overlay container and add the `.uk-position-cover` class from the Utility component.

IMPORTANT When applying this, make sure to replace the `<figcaption>` element with another container element, like a `<div>`. Otherwise the markup will not be validated.

### Example

### Anchor

Lorem ipsum dolor sit amet.

### Markup

    <figure class="uk-overlay">
        <img src="" width="" height="" alt="">
        <div class="uk-overlay-panel">...</div>
        <a class="uk-position-cover" href=""></a>
    </figure>

NOTE To display only the overlay panel as a link, just place the anchor inside the overlay panel.