<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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="contact-us"> <div class="card"> <div class="card-body"> <img src="https://studyshoot.com/wp-content/uploads/2020/05/OIP-2.jpg"> </div> <h3>Ahmad Al Hariri</h3> <div class="card-footer text-center"> <span> <ul> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> </ul> </span> </div> </div> <div class="card"> <div class="card-body"> <img src="https://studyshoot.com/wp-content/uploads/2020/05/OIP-2.jpg"> </div> <h3>Ahmad Al Hariri</h3> <div class="card-footer text-center"> <span> <ul> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> </ul> </span> </div> </div> <div class="card"> <div class="card-body"> <img src="https://studyshoot.com/wp-content/uploads/2020/05/OIP-2.jpg"> </div> <h3>Ahmad Al Hariri</h3> <div class="card-footer text-center"> <span> <ul> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> </ul> </span> </div> </div> </div>

body{ background-color:#1f2024; } .contact-us{ justify-content: center; align-items: center; display:flex; top: 20%; left: 0; position: absolute; width: 100%; } .contact-us img{ width:120px; height:120px; margin:0 auto; border-radius:50%; overflow:hidden; display:block; outline: 2px solid inherit; outline-offset: -15px; } .contact-us img:hover{ backface-visibility: hidden; transform: scale(1.22, 1.22); opacity: .5; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .contact-us span { display:inline-flex; } .contact-us h3{ color: chocolate; padding:10px; font-size:16px; text-align:center; } .contact-us ul { margin:0; padding:0; } .contact-us ul li { list-style:none; float:left; } .contact-us ul li a { text-align: center; color:#aaa; margin:0 10px; font-size:20px; transition:0.5s; } .contact-us ul li:hover a { color:#e91e63; transform:rotateY(360deg); }