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 не будет опубликован. Обязательные поля помечены *

два × три =