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

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

<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

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.

Example

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.

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

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

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.