Компонент Наложение
Эффект наложения. Создайте наложение поверх изображения, применяйте различные стили и позиции. Модификаторы стиля. Иконка в качестве наложения. Руководство по использованию.
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="images/photo.webp" width="1920" height="1080" loading="lazy" 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="images/photo.webp" width="900" height="600" alt="Наложение" loading="lazy">
<div class="uk-overlay uk-overlay-default uk-position-bottom">
<p>По утрам ем бутерброды с икрой, чувствую - жизнь удалась!</p>
</div>
</div>
</div>
<div>
<div class="uk-inline">
<img src="images/photo.webp" width="900" height="600" alt="Наложение" loading="lazy">
<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.
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<div class="uk-inline">
<img src="images/photo.webp" width="900" height="600" alt="Наложение" loading="lazy">
<div class="uk-overlay uk-overlay-primary uk-position-bottom">
<p>Primary. Многие думают, что водка - это выход. Ребята, это вход.</p>
</div>
</div>
</div>
<div>
<div class="uk-inline">
<img src="images/photo.webp" width="900" height="600" alt="Наложение" loading="lazy">
<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="images/dark.webp" width="900" height="600" alt="overlay" loading="lazy">
<div class="uk-position-center">
<span uk-overlay-icon></span>
</div>
</div>
</div>
<div>
<div class="uk-inline uk-dark">
<img src="images/photo.webp" width="900" height="600" alt="overlay" loading="lazy">
<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>
Позиция для «Оверлея»
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<div class="uk-inline">
<img src="images/photo.webp" width="900" height="600" alt="overlay" loading="lazy">
<div class="uk-overlay uk-overlay-default uk-position-top">
<p>Top</p>
</div>
</div>
</div>
<div>
<div class="uk-inline">
<img src="images/photo.webp" width="900" height="600" alt="overlay" loading="lazy">
<div class="uk-overlay uk-overlay-primary uk-light uk-position-center">
<p>Center</p>
</div>
</div>
</div>
</div>