叠加

创建一个图像叠加层，它有不同的样式。

用法

此组件易于应用。要创建位置上下文，请将 .uk-overlay 类添加到图像周围的容器元素。将 .uk-overlay-panel 类添加到子元素以创建实际的叠加面板。通常你会使用 <figure 和 <figcaption> 元素来实现此目的。

示例

标记

<figure class="uk-overlay">
    <img src="" width="" height="" alt="">
    <figcaption class="uk-overlay-panel">...</figcaption>
</figure>

鼠标悬停时切换叠加层

默认情况下，叠加层始终可见。要隐藏叠加层并在鼠标悬停时显示它，请将 .uk-overlay-hover 类添加到叠加层容器。

示例

<figure class="uk-overlay uk-overlay-hover">
    <img src="" width="" height="" alt="">
    <figcaption class="uk-overlay-panel">...</figcaption>
</figure>

活动时切换

要在其父容器处于活动状态时切换叠加层，请添加 .uk-overlay-active 类。例如，这在与 幻灯片组件 结合使用时非常方便。

叠加层背景

要为叠加层添加背景，只需将 .uk-overlay-background 类添加到叠加层容器即可。

示例

标记

<figure class="uk-overlay">
    <img src="" width="" height="" alt="">
    <figcaption class="uk-overlay-panel uk-overlay-background">...</figcaption>
</figure>

叠加层位置

默认情况下，叠加层从左上角覆盖其整个父容器。要定位和裁剪叠加层，请将以下类之一添加到叠加层面板。

示例

标记

<figure class="uk-overlay">
    <img src="" width="" height="" alt="">
    <figcaption class="uk-overlay-panel uk-overlay-top">...</figcaption>
</figure>

叠加层图标

基本上可以将任何内容放入您的叠加层中。但您也可以将 .uk-overlay-icon 类添加到叠加层面板，以便它显示一个图标。

示例

标记

<figure class="uk-overlay">
    <img src="" width="" height="" alt="">
    <div class="uk-overlay-panel uk-overlay-icon"></div>
</figure>

叠加层图像

要将图像用作叠加层，请将 .uk-overlay-image 类添加到具有 .uk-overlay-panel 类的 <img> 元素。

示例

标记

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

叠加层过渡效果

叠加层面板和图像可以轻松地进行动画处理。只需将以下类之一添加到叠加层面板或 <img> 元素。请注意，这仅在与 .uk-overlay-hover 或 .uk-overlay-active 类结合使用时有效。

注意 如果您想为图像添加动画效果，但希望叠加层面板始终可见，只需将 .uk-ignore 类添加到面板即可。这样，即使使用了 .uk-overlay-hover 类，它也会显示出来。

示例

标记

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

叠加层和弹性布局

您可以使用 弹性布局组件 来垂直和水平对齐叠加层，而无需裁剪它。

示例

标记

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

叠加层锚点

要将整个叠加层用作链接，只需将 <a> 元素放置在叠加层容器内，并添加来自 实用工具组件 的 .uk-position-cover 类。

重要 应用此操作时，请务必将 <figcaption> 元素替换为另一个容器元素，如 <div>。否则，标记将无法验证。

示例

锚点

Lorem ipsum dolor sit amet.

标记

<figure class="uk-overlay">
    <img src="" width="" height="" alt="">
    <div class="uk-overlay-panel">...</div>
    <a class="uk-position-cover" href=""></a>
</figure>

注意 要仅将叠加层面板显示为链接，只需将锚点放置在叠加层面板内即可。