Create an image overlay, which comes in different styles.

\n\n

Usage

\n\n

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.

\n\n

Example

\n\n
\n\n
\n \n
\n
\n\n \n \n
\n
\n\n
\n\n

Markup

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

Overlay area content

\n\n

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.

\n\n

Example

\n\n
\n
\n \n
\n
\n

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

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

Overlay toggle

\n\n

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

\n\n

Example

\n\n
\n
\n
\n \n
\n
\n
Caption
\n
\n
\n\n

Markup

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

Overlay caption

\n\n

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

\n\n

Example

\n\n
\n\n
\n \n
Some text
\n
\n\n \n \n
Some text
\n
\n\n
\n\n

Markup

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

Overlay with thumbnails

\n\n

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.

\n\n

Example

\n\n \n\n

Markup

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