Создавайте эффекты наложения и стилизуйте их.
Использование
Добавьте класс .uk-overlay к элементу после изображения, чтобы создать панель наложения. Чтобы задать позиционирование элемента, добавьте класс .uk-inline из компонента Утилиты к элементу - обертке. Наконец, добавьте один из классов семейства .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.jpg" alt=""> <div class="uk-overlay uk-light uk-position-bottom"> <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div>
Модификаторы стилей
По умолчанию наложение имеет отступы, но не имеет оформления. Добавьте один из этих классов модификаторов, чтобы добавить цвет фона для наложения.
Стандартный
Для простого фонового цвета используйте класс .uk-overlay-default.
-
<div class="uk-child-width-1-2@m" uk-grid> <div> <div class="uk-inline"> <img src="images/photo.jpg" alt=""> <div class="uk-overlay uk-overlay-default uk-position-bottom"> <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> <div> <div class="uk-inline"> <img src="images/photo.jpg" alt=""> <div class="uk-overlay-default uk-position-cover"></div> <div class="uk-overlay uk-position-bottom uk-dark"> <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div>
Дополнительный
Для задания дополнительного фонового цвета используйте класс .uk-overlay-primary.
-
<div class="uk-child-width-1-2@m" uk-grid> <div> <div class="uk-inline"> <img src="images/photo.jpg" alt=""> <div class="uk-overlay uk-overlay-primary uk-position-bottom"> <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> <div> <div class="uk-inline"> <img src="images/photo.jpg" alt=""> <div class="uk-overlay-primary uk-position-cover"></div> <div class="uk-overlay uk-position-bottom uk-light"> <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div>
Иконка в качестве оверлея
TЧтобы отобразить значок наложения, добавьте атрибут 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.jpg" alt=""> <div class="uk-position-center"> <span uk-overlay-icon></span> </div> </div> </div> <div> <div class="uk-inline uk-dark"> <img src="images/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-* из компонента Позиционирование для выравнивания оверлея.
<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.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="images/photo.jpg" alt=""> <div class="uk-overlay uk-overlay-default uk-position-center"> <p>Center</p> </div> </div> </div> </div>