<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="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div id="rcorners9" > <img src="http://shushi168.com/data/out/190/37371806-profile-pictures.png" style="height:150px; width:150px"></img> </div> </div> <div class="back"> <div id="rcorners8"> <h4 id="text2">Settings</h4> <img src="http://simpleicon.com/wp-content/uploads/gear-3.png" style="height:150px; width:150px"/> </div> </div> </div> </div>

#text2{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-80%); } #rcorners8 { border-radius: 50%; background-repeat: no-repeat; box-shadow: 10px 10px 15px grey; } #rcorners9 { position: absolute; border-radius: 50%; background-repeat: no-repeat; box-shadow: 10px 10px 15px grey; } /* entire container, keeps perspective */ .flip-container { perspective: 1000px; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .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); }