Наложение

Создание накладываемого изображения, которая поставляется в различных стилях.

Использование

Этот компонент легко наносится. Для создания позиции контекста, добавить .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 класс к <img> элемент с .uk-overlay-panel класс.

Пример

Разметки

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

Наложение и Flex

Вы можете использовать Компонента Flex, чтобы выровнять накладку вертикально и горизонтально без обрезки его.

Пример

Разметки

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

Примечание, чтобы отобразить только панель верхнего слоя в виде ссылки, просто поместите якорь внутрь накладки панели.