Подробное описание и демонстрация работы блока команда для сайта под номером №17 для библиотеки Bootstrap. Html и CSS код для реализации блока our team’a на сайте как на изображении.
Демо блока наша команда — стиль 17
Williamson
заговолокerSteve thomas
Web 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-17/img-1.jpg" alt=""/> <div class="social_media_team"> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in erat interdum, euismod mauris aliquam. </p> <ul class="team_social"> <li><a href="#"><i class="fab fa-facebook"></i></a></li> <li><a href="#"><i class="fab fa-twitter"></i></a></li> <li><a href="#"><i class="fab fa-google-plus"></i></a></li> <li><a href="#"><i class="fab fa-linkedin"></i></a></li> </ul> </div> </div> <div class="team-prof"> <h3 class="post-title"><a href="#">Williamson</a></h3> <span class="post">Web designer</span> </div> </div> </div> </div> </div>css разметка для реализации блока
.our-team{ text-align: center; } .our-team .pic{ position: relative; overflow: hidden; } .our-team .pic img{ width: 100%; height: auto; transition: all 0.2s ease 0s; } .our-team:hover .pic img{ transform: translateY(15px); } .our-team .social_media_team{ width: 100%; position: absolute; bottom: -100%; padding: 25px; background-color:rgba(59, 204, 161, 0.9); transition: all 0.35s ease 0s; } .our-team:hover .social_media_team{ bottom: 0px; } .our-team .description{ margin-top: 10px; color: #fff; } .our-team .team_social{ list-style: none; padding: 0; margin: 0; height: 100%; position: relative; top:2%; } .our-team .team_social li{ display: inline-block; margin: 0 5px 0 0; } .our-team .team_social li a{ width: 45px; height: 45px; line-height: 45px; display: block; color:#fff; font-size: 18px; transition: all 1.3s ease 0s; } .our-team .team_social li a:hover{ background: #fff; color:#424242; } .our-team .team-prof{ margin-top: 10px; } .our-team .post-title a{ text-transform: capitalize; color:#424242; transition: all 0.2s ease 0s; } .our-team .post-title a:hover{ text-decoration: none; color:#3bcca1; } .our-team .post{ color:#3bcca1; font-size: 18px; } @media screen and (max-width: 990px){ .our-team{ margin-bottom: 30px; } }