Подробное описание и демонстрация работы блока команда для сайта под номером №26 для библиотеки Bootstrap. Html и CSS код для реализации блока our team’a на сайте как на изображении.
Демо блока наша команда — стиль 26
Williamson Web Developer
Steve Thomas Web Developer
<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="our-team"> <img src="https://fokit.ru/demo/images/our-team/our-team-style-26/img-1.jpg" alt=""/> <div class="team-content"> <h3 class="team-prof"> <a href="#">Williamson</a> <small>Web designer</small> </h3> <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> <li><a href="#" class="fab fa-instagram"></a></li> </ul> </div> </div> </div> </div> </div>css разметка для реализации блока
.our-team{ position: relative; text-align:center; overflow: hidden; box-shadow:0 0 5px #808080; } .our-team img{ width: 100%; height: auto; transform: scale(1); transition: all 0.40s linear 0s; } .our-team:hover img{ transform: scale(1.3); transition:transform 3s linear 0s; } .our-team .team-content{ position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; opacity: 0; padding: 40px 20px; background: rgba(255,255,255,0.8); transition: all 0.50s ease-in-out; } .our-team:hover .team-content{ opacity: 1; } .our-team .team-prof{ margin:20px 0 20px 0; position:relative; top:13%; } .our-team .team-prof a{ color:#6a6060; font-size:18px; font-weight: bold; letter-spacing:1px; text-transform: uppercase; } .our-team .team-prof a:hover{ color:#f15277; text-decoration:none; } .our-team .team-prof small{ color:#f15277; display: block; font-size:13px; margin-top:10px; text-transform: uppercase; } .our-team .social-link{ padding:0; margin:0; position:relative; top:13%; } .our-team .social-link li{ list-style:none; margin-right:5px; display:inline-block; } .our-team .social-link li a{ width: 35px; height: 35px; line-height:35px; border-radius:50%; color:#fff; background:rgba(0, 0, 0, 0.3); } .our-team .social-link li a:hover{ background:#333; text-decoration:none; } @media only screen and (max-width: 990px){ .our-team{ margin-bottom:20px; } }