Область показа
Область показа позволяет изменять отображение объекта путем наложения на него дополнительных слоев
Структура
Область показа состоит из обертки области и слоев, которые размещаются внутри нее. Это позволяет накладывать области друг на друга, изменяя внешний вид
Я внутри!
<div class="wr-6 sf-viewbox-wrap">
<img src="https://farm8.staticflickr.com/7547/15601130190_465d6b546c.jpg" class="w-100">
<div class="sf-viewbox bg-black-300"></div>
<div class="sf-viewbox bg-p1"></div>
<div class="sf-viewbox">
<div class="align-middle t-center c-white t-4">Я внутри!</div>
</div>
</div>Вы можете использовать различные цвета заливки, паттерны и градиенты для оформления отдельных слоев.
Смотри
Как
Красиво
Получилось!
<div class="row">
<div class="col-12 col-md-6">
<div class=" sf-viewbox-wrap">
<img src="https://farm8.staticflickr.com/7547/15601130190_465d6b546c.jpg" class="w-100">
<div class="sf-viewbox bg-red o-7"></div>
<div class="sf-viewbox bg-p2"></div>
<div class="sf-viewbox">
<div class="align-middle t-center c-white t-4">Я внутри!</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 sf-viewbox-wrap">
<div class=" sf-viewbox-wrap">
<img src="https://farm8.staticflickr.com/7547/15601130190_465d6b546c.jpg" class="w-100">
<div class="sf-viewbox bg-blue o-2"></div>
<div class="sf-viewbox bg-p15"></div>
<div class="sf-viewbox">
<div class="align-middle t-center c-white t-4">Я внутри!</div>
</div>
</div>
</div>
</div>Видео
Вы можете разместить фоновое видео в области показа, используя утилиту для задания соотношения сторон .aspect-ratio. Для видео небходимо добавить класс .sf-viewbox-video.
Текст над видео
<div class="wr-6">
<div class="aspect-ratio aspect-ratio-2x1">
<div class="aspect-ratio-content sf-viewbox-wrap">
<video
poster="../../video/video.mp4"
autoplay="true"
loop="true"
muted="true"
playsinline="true"
class="sf-viewbox-video"
>
<source type="video/webm" src="../../video/video.mp4">
<source type="video/mp4" src="../../video/video.mp4">
</video>
<div class="sf-viewbox bg-black o-3"></div>
<div class="sf-viewbox bg-p1"></div>
<div class="sf-viewbox">
<div class="align-middle t-center c-white t-4">Текст над видео</div>
</div>
</div>
</div>
</div>Отображение при наведении
Используйте класс .sf-viewbox-hover для изменения слоя при наведении. Для плавности перехода используйте класс .transition для дополнительных слоев.
Я внутри!
<div class="wr-6 sf-viewbox-wrap sf-viewbox-hover">
<img src="https://farm8.staticflickr.com/7547/15601130190_465d6b546c.jpg" class="w-100">
<div class="sf-viewbox bg-black-300 transition"></div>
<div class="sf-viewbox bg-p1 transition"></div>
<div class="sf-viewbox transition">
<div class="align-middle t-center c-white t-4">Я внутри!</div>
</div>
</div>