"social"
Bootstrap 4.1.1 Snippet by YONY GUTIERREZ CAMPOS

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="our-team"> <img src="http://static1.purebreak.com.br/articles/7/62/22/7/@/248104-filme-liga-da-justica-ganha-nova-foto-diapo-3.jpg"> <div class="team-content"> <h3 class="title">YONY</h3> <span class="post">fond -enb</span> <ul class="social"> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-twitter"></i></a></li> <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="our-team"> <img src="http://static1.purebreak.com.br/articles/7/62/22/7/@/248104-filme-liga-da-justica-ganha-nova-foto-diapo-3.jpg"> <div class="team-content"> <h3 class="title">YONY</h3> <span class="post">fond -enb</span> <ul class="social"> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-twitter"></i></a></li> <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="our-team"> <img src="http://static1.purebreak.com.br/articles/7/62/22/7/@/248104-filme-liga-da-justica-ganha-nova-foto-diapo-3.jpg"> <div class="team-content"> <h3 class="title">YONY</h3> <span class="post">fond -enb</span> <ul class="social"> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-twitter"></i></a></li> <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="our-team"> <img src="http://static1.purebreak.com.br/articles/0/44/10/0/@/201993-filme-liga-da-justica-zack-snyder-di-diapo-2.jpg"> <div class="team-content"> <h3 class="title">GUTIERREZ</h3> <span class="post">back enb</span> <ul class="social"> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-twitter"></i></a></li> <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li> </ul> </div> </div> </div> </div> </div>
.our-team{ border: 2px solid violet; border-radius: 10px; text-align: center; margin: 10px; z-index: 1; position: relative; } .our-team:before, .our-team:after{ content: ""; width: 100%; height: 104%; background: violet; position: absolute; top: 50%; left: 0; z-index: -1; transform: translateY(-50%) scaleX(0.3); transition: all 0.3s ease 0s; } .our-team:after{ width: 106%; left: 50%; transform: translate(-50%, -50%) scaleY(0.25); } .our-team:hover:before{ transform: translateY(-50%) scaleX(0.7); } .our-team:hover:after{ transform: translate(-50%, -50%) scaleY(0.7); } .our-team img{ width: 100%; height: auto; border-radius: 10px; transition: all 0.3s ease 0s; } .our-team .team-content{ width: 93%; padding: 25px 0 10px; background: violet; position: absolute; bottom: 50px; left: 50%; opacity: 0; -webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); transform: translateX(-50%); transition: all 0.3s cubic-bezier(0.5, 0.2,0.1,0.9); } .our-team:hover .team-content{ bottom: 10px; opacity: 1; } .our-team .title{ font-size: 25px; font-weight: 600; color: #fff; letter-spacing: 1px; text-transform: capitalize; margin: 0; } .our-team .post{ display: block; font-size: 16px; color: #fff; text-transform: uppercase; margin-bottom: 10px; } .our-team .social{ padding: 0; margin: 0; list-style: none; } .our-team .social li{ display: inline-block; margin: 0 5px; } .our-team .social li a{ display: block; width: 35px; height: 35px; line-height: 35px; border-radius: 50%; background: #fff; font-size: 20px; color: #000; transition: all 0.3s ease 0s; } .our-team .social li a:hover{ background: linear-gradient(to bottom,violet, darkred); box-shadow: 0 0 0 5px rgba(255,255,255,0.3); color: #fff; } @media only screen and (max-width: 990px){ .our-team{ margin-bottom: 30px; } }

Related: See More


Questions / Comments: