Overlay

Written on 20 February 2015. Posted in Features

Create an image overlay, which comes in different styles.

Usage

This component can be applied to an image, an anchor or text. Just add the .uk-overlay to a container element and the .uk-overlay-area class to a <div> to create the overlay itself.

Example

Markup

<!-- This is a div with an overlay -->
<div class="uk-overlay">
    <img src="" alt="">
    <div class="uk-overlay-area"></div>
</div>

<!-- This is an anchor with an overlay -->
<a class="uk-overlay" href="">
    <img src="" alt="">
    <div class="uk-overlay-area"></div>
</a>

Overlay area content

By default, the overlay displays an icon. But you can also enter your own content, like text or a button. Just add the .uk-overlay-area-content class to a <div> element inside the overlay area.

Example

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Button

<div class="uk-overlay">
    <img src="" alt="">
    <div class="uk-overlay-area">
        <div class="uk-overlay-area-content">...</div>
    </div>
</div>

Overlay toggle

To toggle the overlay by hovering the area around it, like a caption for example, just add the .uk-overlay-toggle class.

Example

Markup

<figure class="uk-overlay-toggle">
    <div class="uk-overlay">
        <img src="" alt="">
        <div class="uk-overlay-area"></div>
    </div>
    <figcaption>...</figcaption>
</figure>

Overlay caption

Add the .uk-overlay-caption class to create an overlay with a text caption.

Example

Some text

Some text

Markup

<!-- This is a div with an overlay caption -->
<div class="uk-overlay">
    <img src="" alt="">
    <div class="uk-overlay-caption">...</div>
</div>

<!-- This is an anchor with an overlay caption -->
<a class="uk-overlay" href="">
    <img src="" alt="">
    <div class="uk-overlay-caption">...</div>
</a>

Overlay with thumbnails

You can also apply an overlay to a thumbnail from the Thumbnail component. To toggle the overlay by hovering the thumbnail's caption or frame, just add the .uk-overlay-toggle class.

Example

Some text

Markup

<a class="uk-thumbnail uk-overlay-toggle" href="">
    <div class="uk-overlay">
        <img src="" alt="">
        <div class="uk-overlay-caption">...</div>
    </div>
</a>