
Подробное описание и демонстрация работы блока команда для сайта под номером №23 для библиотеки Bootstrap. Html и CSS код для реализации блока our team’a на сайте как на изображении.
Демо блока наша команда — стиль 23

Williamsonзаговолокer

KristianaWeb Developer

Steve ThomasWeb Developer
<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="our-team"> <div class="pic"> <img src="https://fokit.ru/demo/images/our-team/our-team-style-23/img-1.jpg" alt=""> <div class="over-layer"> <ul class="social-link"> <li><a href="#" class="fab fa-facebook"></a></li> <li><a href="#" class="fab fa-google"></a></li> <li><a href="#" class="fab fa-twitter"></a></li> </ul> </div> </div> <div class="team-content"> <h3 class="post-title">Williamson<small>Web designer</small></h3> </div> </div> </div> </div> </div>css разметка для реализации блока
.our-team{ overflow: hidden; text-align: center; } .our-team .pic{ position: relative; overflow:hidden; border-radius: 50%; } .our-team .pic img{ width: 100%; height: auto; } .our-team .over-layer{ position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(147, 98, 143,0.9); opacity:0; transition: all 0.30s ease 0s; } .our-team:hover .over-layer{ opacity:1; } .our-team .social-link{ margin:0; padding:0; position:relative; top:65%; left:0; list-style:none; transition:all 0.50s ease 0s; } .our-team:hover .social-link{ top:45%; } .our-team .social-link li{ display: inline-block; margin-right:5px; } .our-team .social-link li a{ width:50px; height:50px; color:#93628f; background:#fff; font-size:22px; line-height:50px; border-radius:50%; text-align: center; transform: translateY(0px); transition: all 0.40s linear 0s; } .our-team .social-link li a:hover{ transform: translateY(-13px); text-decoration:none; } .our-team .social-link li a.fa-facebook:hover{ color:#5d82d1; } .our-team .social-link li a.fa-google:hover{ color:#eb5e4c; } .our-team .social-link li a.fa-twitter:hover{ color:#40bff5; } .our-team .team-content{ padding:12px 25px; } .our-team .post-title{ margin:0; color:#93628f; font-size:20px; letter-spacing:1px; text-transform:uppercase; } .our-team .post-title:after{ content: ""; border-bottom: 2px solid #93628f; width: 15%; display: block; margin: 15px auto; } .our-team .post-title small{ display: block; font-size:14px; margin-top:10px; letter-spacing:1px; text-transform:uppercase; }