Section Team

учим bootstrap 4 Section Team

В этом разделе мы будем использовать систему сетки, чтобы распределить равномерное пространство между изображениями. Каждое изображение занимает 3 столбца ( .col-md-3 ) контейнера — это составляет 25% от общего пространства.

Наша HTML структура:

<!-- Team section -->
<section class="team">
 <div class="container">
    <h2 class="text-center">Наша команда</h2>
  <div class="row">
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="https://sifo.ru/image/catalog/blog/snow-white/3.jpg" class="img-fluid" alt="team">
    <div class="des">
      Sara
     </div>
    <span class="text-muted">Менеджер</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="https://st.depositphotos.com/1008939/1880/i/450/depositphotos_18807295-stock-photo-portrait-of-handsome-man.jpg" class="img-fluid" alt="team">
    <div class="des">
       Chris
     </div>
    <span class="text-muted">S.инженер</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="https://elle.ua/upload/image/gettyimages-678628142.jpg" class="img-fluid" alt="team">
    <div class="des">
      Layla 
     </div>
    <span class="text-muted">Front End Developer</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="https://avatars.mds.yandex.net/get-bunker/135516/51b4b61c698146cb70d04a98f5b1080642ddf150/orig" class="img-fluid" alt="team">
     <div class="des">
      J.Jirard
     </div>
    <span class="text-muted">Руководитель</span>
   </div>
  </div>
 </div>
</section >

И давайте добавим немного стиля:

.team{
 margin: 4em 0;
 position: relative;  
}
.team h2{
 color:#F97300;
 margin: 2em; 
}
.team .item{
 position: relative;
}
.team .des{
 background: #F97300;
 color: #fff;
 text-align: center;
 border-bottom-left-radius: 93%;
 transition:.3s ease-in-out;
 
}

И при наведении такой стиль:

.team .item:hover .des{
 height: 100%;
 background:#f973007d;
 position: absolute;
 width: 89%;
 padding: 5em;
 top: 0;
 border-bottom-left-radius: 0;
}

Должно получиться так:

Очень круто! ?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

18 − 7 =