<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="row"> <div class="box"> <div>Hello</div> <div> World </div> </div> </div> </div>

.box { background: #e3e3e3 none repeat scroll 0 0; border: 1px dashed #666; cursor: pointer; height: 200px; margin: auto; position: relative; transition: all 1s ease 0s; width: 400px; } .box::after { bottom: 0; box-shadow: 0 9px 20px rgba(0, 0, 0, 0.4); content: ""; height: 10px; left: 15%; position: absolute; width: 70%; z-index: -1; } .box > div { background: #e3e3e3 none repeat scroll 0 0; font: 45px/200px bold helvetica,arial,sans-serif; height: 100%; left: 0; position: absolute; text-align: center; text-shadow: 0 1px 0 white; top: 0; transition: all 0.5s ease-in-out 0s; width: 100%; } .box > div:first-child { position: relative; z-index: 2; } .box:hover { transform: rotateY(180deg); } .box:hover > div:first-child { opacity: 0; } .box:hover div:last-child { transform: rotateY(180deg); }