<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="mate-block" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div id="front-cont" > <img class="img-shadow img img-responsive img-circle" src="https://placeimg.com/520/520/people" alt=""></img> </div> </div> <div class="back"> <div id="back-cont"> <button class="btn">Message</button> <button class="btn">Info</button> </div> </div> </div> </div> <div class="mate-block" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div id="front-cont" > <img class="img-shadow img img-responsive img-circle" src="https://placeimg.com/520/520/people" alt=""></img> </div> </div> <div class="back"> <div id="back-cont"> <button class="btn">Message</button> <button class="btn">Info</button> </div> </div> </div> </div> <div class="mate-block" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div id="front-cont" > <img class="img-shadow img img-responsive img-circle" src="https://placeimg.com/520/520/people" alt=""></img> </div> </div> <div class="back"> <div id="back-cont"> <button class="btn">Message</button> <button class="btn">Info</button> </div> </div> </div> </div> <div class="mate-block" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div id="front-cont" > <img class="img-shadow img img-responsive img-circle" src="https://placeimg.com/520/520/people" alt=""></img> </div> </div> <div class="back"> <div id="back-cont"> <button class="btn">Message</button> <button class="btn">Info</button> </div> </div> </div> </div> </div>

.img-shadow { box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); } .container { display: flex; flex-flow: row wrap; } #back-cont { border-radius: 50%; background-repeat: no-repeat; background-color: #ddd; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; } #front-cont { position: absolute; border-radius: 50%; background-repeat: no-repeat; } /* entire container, keeps perspective */ .mate-block { perspective: 1000px; } /* flip the pane when hovered */ .mate-block:hover .flipper, .mate-block.hover .flipper { transform: rotateY(180deg); } .mate-block, .front, .back { width: 150px; height: 150px; } /* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); }