Компонент Наложение : Overlay

Эффект наложения. Создайте наложение поверх изображения, применяйте различные стили и позиции. Модификаторы стиля. Иконка в качестве наложения. Руководство по использованию.

Руководство по использованию

Добавьте класс .uk-inline из компонента Utility к элементу контейнера. Добавьте изображение и класс .uk-overlay к элементу ниже, чтобы создать оверлей - панель с эффектом наложения. Наконец, добавьте один из классов .uk-position-* из компонента позиционирование элементов, чтобы выровнять наложение.

<div class="uk-inline">
    <img src="" alt="">
    <div class="uk-overlay uk-position-bottom"></div>
</div>
Примечание Добавьте класс .uk-light или .uk-dark, чтобы улучшить видимость объектов на темных или светлых изображениях.
  • По умолчанию Далеко-далеко за словесными горами в красивой стране.

  • <div class="uk-inline">
        <img src="/demo/img/photo.jpg" alt="">
        <div class="uk-overlay uk-light uk-position-bottom">
            <p>По умолчанию Далеко-далеко за словесными горами в красивой стране.</p>
        </div>
    </div>

Модификаторы стиля

По умолчанию Overlay имеет внутренние отступы (поля), но не имеет дополнительных стилей. Добавьте один из классов модификаторов, чтобы добавить цвет фона для эффекта наложения.


Модификатор «Default»

Для обычного светлого фона добавьте класс .uk-overlay-default.

  • По утрам ем бутерброды с икрой, чувствую - жизнь удалась!

    В следующем году посажу еще больше кабачков...

  • <div class="uk-child-width-1-2@m" uk-grid>
        <div>
            <div class="uk-inline">
                <img src="/demo/img/photo.jpg" alt="">
                <div class="uk-overlay uk-overlay-default uk-position-bottom">
                    <p>По утрам ем бутерброды с икрой, чувствую - жизнь удалась!</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline">
                <img src="/demo/img/photo.jpg" alt="">
                <div class="uk-overlay-default uk-position-cover"></div>
                <div class="uk-overlay uk-position-bottom uk-dark">
                    <p>В следующем году посажу еще больше кабачков...</p>
                </div>
            </div>
        </div>
    </div>

Модификатор «Primary»

Для темного фона добавьте класс .uk-overlay-primary.

  • Primary. Многие думают, что водка - это выход. Ребята, это вход.

    Primary. Сломай стереотип! Позвони маме и спроси, надела ли она шапку?

  • <div class="uk-child-width-1-2@m" uk-grid>
        <div>
            <div class="uk-inline">
                <img src="/demo/img/photo.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom">
                    <p>Primary. Многие думают, что водка - это выход. Ребята, это вход.</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline">
                <img src="/demo/img/photo.jpg" alt="">
                <div class="uk-overlay-primary uk-position-cover"></div>
                <div class="uk-overlay uk-position-bottom uk-light">
                    <p>Primary. Сломай стереотип! Позвони маме и спроси, надела ли она шапку?</p>
                </div>
            </div>
        </div>
    </div>

Overlay и иконка

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

<div class="uk-position-center">
    <span uk-overlay-icon></span>
</div>
  • <div class="uk-child-width-1-2@m" uk-grid>
        <div>
            <div class="uk-inline uk-light">
                <img src="/demo/img/dark.jpg" alt="">
                <div class="uk-position-center">
                    <span uk-overlay-icon></span>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline uk-dark">
                <img src="/demo/img/photo.jpg" alt="">
                <div class="uk-overlay-default uk-position-cover">
                    <div class="uk-position-center">
                        <span uk-overlay-icon></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

Позиция для наложения

Добавьте один из классов .uk-position-* из компонента позиционирование контента, чтобы установить необходимую позицию для overlay.

<div class="uk-overlay uk-position-top"></div>

Позиция для «Оверлея»

  • Top

    Center

  • <div class="uk-child-width-1-2@m" uk-grid>
        <div>
            <div class="uk-inline">
                <img src="/demo/img/photo.jpg" alt="">
                <div class="uk-overlay uk-overlay-default uk-position-top">
                    <p>Top</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-inline">
                <img src="/demo/img/photo.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-light uk-position-center">
                    <p>Center</p>
                </div>
            </div>
        </div>
    </div>
Документация
Компоненты