Область показа

Область показа позволяет изменять отображение объекта путем наложения на него дополнительных слоев

Структура

Область показа состоит из обертки области и слоев, которые размещаются внутри нее. Это позволяет накладывать области друг на друга, изменяя внешний вид

Я внутри!
<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>