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

<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">OUR TEAM</h5> <div class="row"> <!-- Team member --> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="image-flip" > <div class="mainflip flip-0"> <div class="frontside"> <div class="card"> <div class="card-body text-center"> <p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png" alt="card image"></p> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="https://www.fiverr.com/share/qb8D02" 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">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-google"></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://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_02.png" alt="card image"></p> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="https://www.fiverr.com/share/qb8D02" 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">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-google"></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://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_03.png" alt="card image"></p> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="https://www.fiverr.com/share/qb8D02" 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">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-google"></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://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_04.jpg" alt="card image"></p> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="https://www.fiverr.com/share/qb8D02" 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">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-google"></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://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_05.png" alt="card image"></p> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="https://www.fiverr.com/share/qb8D02" 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">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-google"></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://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_06.jpg" alt="card image"></p> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="https://www.fiverr.com/share/qb8D02" 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">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <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: #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; } #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: #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%; }
//No Js required

Related: See More


Questions / Comments:

thanks very creative

HoussemBenmammar (2) - 1 month ago - Reply 1


thanks very creative

HoussemBenmammar (2) - 1 month ago - Reply 1


Thanks, for the appreciation!

Sunlimetech (-2) - 1 month ago - Reply 0


why i cannot see the twitter icon and other icon in the card

vikas772 (1) - 9 months ago - Reply 1


vikas772 please check your font awesome file. it should be the same version. Or import it correctly.

Thanks

Sunlimetech (-2) - 1 month ago - Reply 0


Very well presented! Thank you!

GAUSS123 (1) - 1 year ago - Reply 1


Thanks, for the appreciation!

Sunlimetech (-2) - 1 month ago - Reply 0


Thank for snippets. Please add width:100% to .frontsize and .backside will fix the stretch issue on IE when hover on card.

.frontside,

.backside {

width: 100%;

}

tranquyetdev (-1) - 10 months ago - Reply -1


the boxes are not squared, they are more like retangules, and the text is not centralized :(

JohnatanJoseFerreira () - 1 month ago - Reply 0


how to add more than six members?

prachi12 () - 7 months ago - Reply 0


just copy paste the member

Sunlimetech (-2) - 1 month ago - Reply 0


how to add more than six members?

prachi12 () - 7 months ago - Reply 0


hey I saved the filename by team.html and what should be the name of css i.e. name of css file

I saved it by team.css but it's not working please help...

vikas772 (1) - 9 months ago - Reply 0


this is how it work

add this into html

<link href="css/styles.css" rel="stylesheet">

then create folder at root with name css and create styles.css init

Let me know if you still need help

Sunlimetech (-2) - 1 month ago - Reply 0


I guess you can name it team.html.css. You can try it. It might work. Good Luck!

w11stop () - 8 months ago - Reply 0