<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 ----------> <link href='https://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'> <div class="blocks"> <a href="#"> <div class="block"> <div class="block--norm"> <h2>Home</h2> </div> <div class="block--hover"> <h2>Home</h2> </div> </div> </a> <a href="#"> <div class="block"> <div class="block--norm"> <h2>Work</h2> </div> <div class="block--hover"> <h2>Work</h2> </div> </div> </a> <a href="#"> <div class="block"> <div class="block--norm"> <h2>About</h2> </div> <div class="block--hover"> <h2>About</h2> </div> </div> </a> </div>

* { font-family: 'Lato', sans-serif; font-size: 100%; } html { background: #d4d4d4; } a { color: #2b2b2b; text-decoration: none; } .blocks { width: 470px; margin: 0 auto; } .block { position: relative; float: left; height: 50px; width: 33.333333%; font-size: 2em; text-transform: uppercase; } .block .block--norm { -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); background: #1a1a1a; color: #fefefe; } .block .block--hover { -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); transform: rotateX(0deg); background: #ff0044; } .block:hover .block--norm { -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .block:hover .block--hover { -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } .block div { position: absolute; top: 0; padding: 30px; box-shadow: 0px 0px 40px rgba(47, 47, 47, 0.6) inset; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-transition: 400ms; -o-transition: 400ms; -webkit-transition: 400ms; transition: 400ms; -moz-transform-origin: 50% 50% -75px 50%; -ms-transform-origin: 50% 50% -75px 50%; -webkit-transform-origin: 50% 50% -75px 50%; transform-origin: 50% 50% -75px 50%; }