Overlay

• Использование
• Overlay - эффект «При наведении»
• Overlay - эффект «Наложение фона»
• Overlay - позиция
• Overlay - эффект «Наложение иконки»
• Overlay - эффект «Наложение изображения»
• Overlay - эффект «Переходы»
• Overlay и Flex
• Overlay - наложение ссылки

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

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

Пример

<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-контейнер.

Пример

<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 в оверлей-контейнер.

Пример

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

Overlay - позиция

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

Пример

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

Пример

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

Пример 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.

Пример

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

Примеры

<!-- В этом примере 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>

Примеры

<!-- В этом примере 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>

Пример

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

Пример

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

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

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

Пример

Ссылка - 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>