<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"> <span class="tag-links"> <a href="#" rel="tag">Assistant</a> <a href="#" rel="tag">Profilet</a> <a href="#" rel="tag">Mail</a> <a href="#" rel="tag">Post</a> <a href="#" rel="tag">Assistant</a> <a href="#" rel="tag">Assistant</a> </span> </div> </div> <div class="card-container"> <div class="card"> <div class="side"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div> <div class="side back">Jimmy Eat World</div> </div> </div>

.row{ margin-top:200px; } .tag-links a { background-color: #767676; border-radius: 0 2px 2px 0; color: #fff; display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.2727272727; margin: 2px 4px 2px 10px; padding: 3px 7px; position: relative; text-transform: uppercase; text-decoration:none; } a:hover, a:active { outline: 0; } .tag-links a:hover{ background-color: #24890d; text-decoration: none; } .tag-links a:hover:before { border-right-color: #41a62a; } .tag-links a:hover { background-color: #41a62a; color: #fff; } .tag-links a:before { border-top: 10px solid transparent; border-right: 8px solid #767676; border-bottom: 10px solid transparent; content: ""; height: 0; position: absolute; top: 0; left: -8px; width: 0; } .tag-links a:after { background-color: #fff; border-radius: 50%; content: ""; height: 4px; position: absolute; top: 8px; left: -2px; width: 4px; } .card-container { cursor: pointer; height: 150px; perspective: 600; position: relative; width: 150px; } .card { height: 100%; position: absolute; transform-style: preserve-3d; transition: all 1s ease-in-out; width: 100%; } .card:hover { transform: rotateY(180deg); } .card .side { backface-visibility: hidden; border-radius: 6px; height: 100%; position: absolute; overflow: hidden; width: 100%; } .card .back { background: #eaeaed; color: #0087cc; line-height: 150px; text-align: center; transform: rotateY(180deg); }