<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <div class="container"> <div class="row"> <div class="card effect__hover"> <div class="card__front"> <span class="card__text">front</span> </div> <div class="card__back"> <span class="card__text">back</span> </div> </div> </div> </div>

.card { position: relative; float: left; padding-bottom: 25%; width: 25%; text-align: center; } .card__front, .card__back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .card__front, .card__back { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .card__front { background-color: #ff5078; } .card__back { background-color: #1e1e1e; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card__text { display: inline-block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: 20px; color: #fff; font-family: "Roboto Slab", serif; line-height: 20px; } .card.effect__hover:hover .card__front { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card.effect__hover:hover .card__back { -webkit-transform: rotateY(0); transform: rotateY(0); }