"Team design card flipper using bootstrap 4"
Bootstrap 4.0.0 Snippet by upaul123

<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="//code.jquery.com/jquery-1.11.1.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">Selectaglaze Staff</h5> <div class="row"> <!-- Team member --> <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://pbs.twimg.com/media/ELbJgr5XUAEV5Fm?format=jpg&name=small" alt="card image"></p> <h4 class="card-title">Keith Mercer</h4> <p class="card-text">Managing Director</p> <a href="#" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">Keith Mercer</h4> <p class="card-text">Keith Mercer became Managing Director in 2008, having been Operations Director since 1999. <B></B>[READ MORE] </p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-linkedin"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-skype"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <!-- ./Team member --> <!-- Team member --> <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://www.selectaglaze.co.uk/media/images/xMrChilderstoneshadow_1739.jpg.pagespeed.ic.4tO8kc1I64.webp" alt="card image"></p> <h4 class="card-title">Meredith Childerstone</h4> <p class="card-text">Chairman</p> <a href="#" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">Meredith Childerstone</h4> <p class="card-text">Developing Selectaglaze into a leading specialist designer and manufacture of secondary glazing systems that improve and protect a building's environment through the provision of noise insulation, energy conservation, blast protection and enhanced window security.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-linkedin"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-skype"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <!-- ./Team member --> <!-- Team member --> <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="data:image/jpeg;base64,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"></p> <h4 class="card-title">David Lamburn</h4> <p class="card-text">Finance Director</p> <a href="#" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">David Lamburn</h4> <p class="card-text">I am an experienced finance professional who has worked in high growth businesses and also businesses undergoing change.. </p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-linkedin"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-skype"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <!-- ./Team member --> <!-- Team member --> <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-exp1.licdn.com/dms/image/C5603AQGdjahNODJ4lg/profile-displayphoto-shrink_200_200/0?e=1587600000&v=beta&t=FN0vZIp5YD8TsgwixIT4CLbFpeRLRSBqXabgqQw7o78" alt="card image"></p> <h4 class="card-title">Colin Bignell</h4> <p class="card-text">Sales Director</p> <a href="#" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">Colin Bignell</h4> <p class="card-text">Meeting and developing client relationships whilst supporting the sales team with site meetings, project evaluations, surveys, estimating and negotiating new business.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-linkedin"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-skype"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <!-- ./Team member --> <!-- Team member --> <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-exp1.licdn.com/dms/image/C4E03AQGL9HrMMaCrpg/profile-displayphoto-shrink_200_200/0?e=1587600000&v=beta&t=kn13OXw581cLr1SzBUhedWKIsrJrkpHqa7houMKu7mE" alt="card image"></p> <h4 class="card-title">Zoe Williams</h4> <p class="card-text">Marketing Manager</p> <a href="#" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">Zoe Williams</h4> <p class="card-text">A highly competent Senior Marketing manager with 10+years’ experience. Extensive knowledge of the film, education and construction industries in both the public, not for profit and private sectors–carrying out B2B and B2C campaigns.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-linkedin"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-skype"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <!-- ./Team member --> <!-- Team member --> <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-exp1.licdn.com/dms/image/C5603AQGQdRcS5Fy29Q/profile-displayphoto-shrink_200_200/0?e=1587600000&v=beta&t=KnW6RHzEc-A4WxnfJUMf7o9LhI_etcIZ7rrUgqcQTyk"></p> <h4 class="card-title">Darren Berryman</h4> <p class="card-text">Sales Manager</p> <a href="#" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">Darren Berryman</h4> <p class="card-text">Managing and developing the activities of the sales team and sales administration.Ensuring the company maintains a high quality profile and reputation in line with its products and service.</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"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="#"> <i class="fa fa-google"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <!-- ./Team member --> </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: #500778; box-shadow: none; outline: none; } .btn-primary { color: #fff; background-color: #500778; border-color: #B4E80F; } section { padding: 60px 0; } section .section-title { text-align: center; color: #500778; margin-bottom: 50px; text-transform: uppercase; } #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(180deg); } .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: #B4E80F !important; } .frontside .card .card-title, .backside .card .card-title { color: #DD028E !important; } .frontside .card .card-body img { width: 120px; height: 120px; border-radius: 50%; }
//No Js required

Related: See More


Questions / Comments: