<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <!-- Team --> <section id="team" class="pb-5"> <div class="container"> <h5 class="section-title h1">About Us</h5> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="image-flip" > <div class="mainflip"> <div class="frontside"> <div class="card"> <div class="card-body text-center"> <p ><img class=" img-fluid" src="https://contacts.zoho.com/file?ID=638407041&exp=6000&t=user&fs=original " alt="Dummy image"></p> <h4 class="card-title">Mohan</h4> <p class="card-text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">Mohan</h4> <p class="card-text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-facebook facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-twitter twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-skype skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-google google"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <div class="card"> <div class="card-body text-center"> <p><img class=" img-fluid" src="https://scontent-bom1-1.xx.fbcdn.net/v/t1.0-9/12669701_185278305161851_2595332893364324840_n.jpg?_nc_cat=0&oh=b3253e7cba303b52610634dd6c99fe7f&oe=5B55778C" alt="card image"></p> <h4 class="card-title">Manivanan</h4> <p class="card-text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">Manivanan</h4> <p class="card-text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-facebook facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-twitter twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-skype skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-google google"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <div class="card"> <div class="card-body text-center"> <p><img class=" img-fluid" src="https://media.licdn.com/dms/image/C4D03AQG4SvC_YGBrKw/profile-displayphoto-shrink_200_200/0?e=1527854400&v=alpha&t=fCxZP-S4t4AH_lsxG9j7EQ7OvFzjsVN5j8z9_f3cnE0" alt="card image"></p> <h4 class="card-title">Harish</h4> <p class="card-text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">Harish</h4> <p class="card-text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-facebook facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-twitter twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-skype skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-google google"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </section> <!-- Team -->

/* FontAwesome for working BootSnippet :> */ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); #team { background: #eee !important; } .btn-primary:hover, .btn-primary:focus { background-color: #108d6f; border-color: #108d6f; box-shadow: none; outline: none; } .btn-primary { color: #fff; background-color: #007b5e; border-color: #007b5e; } section { padding: 60px 0; } section .section-title { text-align: center; color: #007b5e; margin-bottom: 50px; text-transform: uppercase; text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em darkblue; color: white; font-size: 52px; background-color:#d28080; } #team .card { border: none; background: #ffffff; } .image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); border-radius: .25rem; } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(90)deg); } .mainflip { -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -ms-transition: 1s; -moz-transition: 1s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: relative; } .frontside { position: relative; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 2; margin-bottom: 30px; } .backside { position: absolute; top: 0; left: 0; background: white; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); } .frontside, .backside { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -moz-transition: 1s; -moz-transform-style: preserve-3d; -o-transition: 1s; -o-transform-style: preserve-3d; -ms-transition: 1s; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; } .frontside .card, .backside .card { min-height: 312px; } .backside .card a { font-size: 18px; color: #007b5e !important; } .frontside .card .card-title, .backside .card .card-title { color: #007b5e !important; } .frontside .card .card-body img { width: 120px; height: 120px; border-radius: 50%; } .facebook{ color:blue; } .twitter{ color:violet; } .google{ color:red; } .skype{ color:skyblue; }