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
<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
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
Markup
<a class="uk-thumbnail uk-overlay-toggle" href="">
<div class="uk-overlay">
<img src="" alt="">
<div class="uk-overlay-caption">...</div>
</div>
</a>
Leave a comment