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
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.