Overlay

Компонент Overlay, создавайте эффект наложения изображения, используйте разные стили, позиции.

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

Компонент Overlay легок в использовании. Для начала, добавьте класс .uk-overlay к элементу контейнера вокруг изображения. Добавьте класс .uk-overlay-panel к дочернему элементу, чтобы создать действующую панель наложения. Как правило, для этого прекрасно подходит элемент <figure> и элемент <figcaption>.

Пример

Overlay

Заголовок

Далеко-далеко за словесными горами в стране гласных и согласных..

Разметка

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

Overlay - эффект «При наведении»

По умолчанию наложение всегда видно. Чтобы изначально скрыть наложение и отобразить его при наведении, нужно добавить класс .uk-overlay-hover в overlay-контейнер.

Пример

Overlay

Заголовок

Далеко-далеко за словесными горами в стране гласных и согласных..

Примечание Для плавного появления добавлен класс-модификатор .uk-overlay-fade.
Подробнее в разделе Overlay - эффект «Переходы».
<figure class="uk-overlay uk-overlay-hover">
    <img src="" width="" height="" alt="">
    <figcaption class="uk-overlay-panel uk-overlay-fade">
        <p>...</p>
    </figcaption>
</figure>

Toggle on active

Чтобы включить наложение, когда его родительский контейнер находится в активном состоянии, добавьте класс .uk-overlay-active Это удобно, например, в сочетании с компонентом Slideshow.

Пример


Overlay - эффект «Наложение фона»

Чтобы создать наложение фона, добавьте класс .uk-overlay-background в оверлей-контейнер.

Пример

Overlay

Заголовок

Далеко-далеко за словесными горами в стране гласных и согласных..

Разметка

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

Overlay - позиция

По умолчанию оверлей покрывает весь родительский контейнер *с верхнего левого края. Чтобы расположить в определенном месте и обрезать наложение, добавьте один из следующих классов к оверлей-панели.

Класс Описание
.uk-overlay-top Добавьте этот класс, чтобы отобразить оверлей сверху.
.uk-overlay-bottom Добавьте этот класс, чтобы отобразить оверлей снизу.
.uk-overlay-left Добавьте этот класс, чтобы отобразить оверлей слева.
.uk-overlay-right Добавьте этот класс, чтобы отобразить оверлей справа.

Пример

  • Image

    Overlay Top

    Душа моя озарена неземной радостью.
  • Image

    Overlay Bottom

    Как эти чудесные весенние утра.
  • Image

    Overlay Left

    Оверлей слева

  • Image

    Overlay Right

    Оверлей справа.

Разметка (без фона)

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

Разметка (с фоном)

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

Overlay - эффект «Наложение иконки»

В оверлей можно добавить практически любой контент. Чтобы там отобразилась иконка, нужно добавить к overlay-панели класс .uk-overlay-icon.

Пример

Overlay

Разметка

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

Пример Overlay с эффектами
«Наложение иконки» + «Наложение фона» + «При наведении» + «Переходы»

Overlay

Разметка

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

Overlay - эффект «Наложение изображения»

Чтобы применить изображение в качестве наложения, добавьте класс .uk-overlay-image к элементу <img> с классом .uk-overlay-panel.

Пример

Overlay Overlay

Разметка

<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 - эффект «Переходы»

К оверлей-панелям и изображениям можно легко добавить анимацию. Добавьте один из следующих классов на оверлейную панель или элемент <img>. Обратите внимание, что это работает только в сочетании с классом .uk-overlay-hover или классом .uk-overlay-active.

Обратите внимание, что это работает только в сочетании с классом .uk-overlay-hover или классом .uk-overlay-active.

Класс Описание
.uk-overlay-slide-top Добавьте этот класс к оверлей-панели, для скольжения сверху.
.uk-overlay-slide-bottom Добавьте этот класс к оверлей-панели, для скольжения снизу.
.uk-overlay-slide-left Добавьте этот класс к оверлей-панели, для скольжения слева.
.uk-overlay-slide-right Добавьте этот класс к оверлей-панели, для скольжения справа.
.uk-overlay-fade Добавьте этот класс к оверлей-панели или изображению, для постепенного/плавного появления.
.uk-overlay-scale Добавьте этот класс к изображению, чтобы добавить эффект масштабирования.
.uk-overlay-spin Добавьте этот класс к изображению, чтобы при наведении повернуть его немного вправо.
.uk-overlay-grayscale Добавьте этот класс к изображению, чтобы изначально обесцветить его, а при наведении вернуть цветность.

Примеры

  • Image

    Overlay Top + Slide Top.

  • Image

    Overlay Slide Top.

Разметка

<!-- В этом примере overlay-панель с установленной позицией Top скользит сверху -->
<figure class="uk-overlay uk-overlay-hover">
    <img src="" width="" height="" alt="">
    <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-top uk-overlay-slide-top">
        ...
    </figcaption>
</figure>

<!-- В этом примере overlay-панель скользит сверху -->
<figure class="uk-overlay uk-overlay-hover">
    <img class="uk-overlay-scale" src="" width="" height="" alt="">
    <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-slide-top">
        ...
    </figcaption>
</figure>

Примеры

  • Image

    Появлние снизу

  • Image

    Overlay Spin + Overlay Bottom + Slide Bottom.

  • Image

    Вау! Красота!

Разметка

<!-- В этом примере overlay-панель установленной позицией Bottom скользит/появляется снизу -->
<figure class="uk-overlay uk-overlay-hover">
    <img src="" width="" height="" alt="">
    <figcaption class="uk-overlay-panel uk-overlay-bottom uk-overlay-slide-bottom">
        ...
    </figcaption>
</figure>

<!-- В этом примере изображение вращается и overlay-панель с background`ом и установленной позицией Bottom скользит снизу. -->
<figure class="uk-overlay uk-overlay-hover">
    <img class="uk-overlay-spin" src="" width="" height="" alt="">
    <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom">
        ...
    </figcaption>
</figure>

<!-- В этом примере изображение масштабируется, фон плавно затемняется и появляется overlay-панель  -->
<figure class="uk-overlay uk-overlay-hover">
    <img class="uk-overlay-scale" src="" width="" height="" alt="">
    <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade">
        ...
    </figcaption>
</figure>
Примечание Если вы хотите анимировать изображение, но хотите, чтобы оверлей-панель всегда была видимой, добавьте к оверлей-панели класс .uk-ignore. Таким образом, содержимое будет отображаться, несмотря на класс .uk-overlay-hover.

Пример

Image

Overlay Hover + Scale + Ignore.

Панель видимая
Изображение масштабируется при наведении

Разметка

<!-- Изображение масштабируется при наведении, а overlay-panel всегда остается видимой -->
<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>

Overlay и Flex

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

Пример

Разметка

<!-- В этом примере overlay-panel отцентрирована вертикально и горизонтально -->
<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>

<!-- В этом примере overlay-panel выровнена по нижнему краю -->
<figure class="uk-overlay">
    <img src="" width="" height="" alt="">
    <figcaption class="uk-overlay-panel uk-flex uk-flex-bottom">
        <div>...</div>
    </figcaption>
</figure>

Overlay - наложение ссылки

Чтобы использовать весь оверлей в качестве ссылки, поместите элемент <a> в оверлей-контейнер и добавьте тегу <а> класс .uk-position-cover из компонента Utility.

ВАЖНО! При использовании этого обязательно замените элемент <figcaption> другим элементом контейнера, например, на <div>. В противном случае разметка не будет проверена.

Пример

Image

Ссылка/Анкор

Я так счастлив, мой друг.

Разметка

<figure class="uk-overlay">
    <img src="" width="" height="" alt="">
    <div class="uk-overlay-panel">
        <p>...</p>
    </div>
    <a class="uk-position-cover" href=""></a>
</figure>
Примечание Чтобы отображать только панель наложения в качестве ссылки, поместите ссылку внутри оверлей-панели.

Пример

Image
Ссылка - Overlay Panel. Далеко-далеко за словесными знаками в стране гласных и согласных живут ромашки.

Разметка

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