<div class="card-container"> <div class="one flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div> <!-- front content --> <h3>Structural Heart <br />Disease</h3> <p>Ovitiam et landi que eicilitibus am, eum, eatius sunt fuga</p> </div> </div> <div class="back"> <div> <!-- back content --> <h3>Back</h3> <p>hello</p> </div> </div> </div> </div> <div class="two flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div> <!-- front content --> <h3>Peripheral Artery <br />Disease</h3> <p>Ovitiam et landi que eicilitibus am, eum, eatius sunt fuga</p> </div> </div> <div class="back"> <div> <!-- back content --> <h3>Back</h3> <p>hello</p> </div> </div> </div> </div> <div class="three flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div> <!-- front content --> <h3>Coronary Artery <br />Disease</h3> <p>Ovitiam et landi que eicilitibus am, eum, eatius sunt fuga</p> </div> </div> <div class="back"> <div> <!-- back content --> <h3>Back</h3> <p>hello</p> </div> </div> </div> </div> <div class="four flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div> <!-- front content --> <h3>Interventional <br />Pharmacology</h3> <p>Ovitiam et landi que eicilitibus am, eum, eatius sunt fuga</p> </div> </div> <div class="back"> <div> <!-- back content --> <h3>Back</h3> <p>hello</p> </div> </div> </div> </div> <div class="five flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div> <!-- front content --> <h3>Electrophysiology</h3> <p>Ovitiam et landi que eicilitibus am, eum, eatius sunt fuga</p> </div> </div> <div class="back"> <div> <!-- back content --> <h3>Back</h3> <p>hello</p> </div> </div> </div> </div> <div class="six flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div> <!-- front content --> <h3>Hyperlipidemia</h3> <p>Ovitiam et landi que eicilitibus am, eum, eatius sunt fuga</p> </div> </div> <div class="back"> <div> <!-- back content --> <h3>Back</h3> <p>hello</p> </div> </div> </div> </div> <div class="seven flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div> <!-- front content --> <h3>Pulmonary <br />Hypertension</h3> <p>Ovitiam et landi que eicilitibus am, eum, eatius sunt fuga</p> </div> </div> <div class="back"> <div> <!-- back content --> <h3>Back</h3> <p>hello</p> </div> </div> </div> </div> <div class="eight flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div> <!-- front content --> <h3>Heart Failure</h3> <p>Ovitiam et landi que eicilitibus am, eum, eatius sunt fuga</p> </div> </div> <div class="back"> <div> <!-- back content --> <h3>Back</h3> <p>Ovitiam et landi que eicilitibus am, eum, eatius sunt fuga</p> </div> </div> </div> </div> <div class="nine flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div> <!-- front content --> <h3>Economics</h3> <p>Ovitiam et landi que eicilitibus am, eum, eatius sunt fuga</p> </div> </div> <div class="back"> <div> <!-- back content --> <h3>Back</h3> <p>Ovitiam et landi que eicilitibus am, eum, eatius sunt fuga</p> </div> </div> </div> </div> <div class="ten flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <div> <!-- back content --> <h3>Contact Us</h3> <p>Ovitiam et landi que eicilitibus am, eum, eatius sunt fuga</p> </div> </div> <div class="back"> <div> <!-- back content --> <h3>Back</h3> <p>hello</p> </div> </div> </div> </div> </div>
.card-container { max-width: 830px; margin: 0 auto; color: #fff; font-size: 12px; font-family: arial; } .card-container h3 { font-size: 16px; text-align: center; } .front > div, .back > div { padding: 10px; } /* entire container, keeps perspective */ .flip-container { perspective: 1000; display: inline-block; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 166px; height: 166px; float: left; display: block; } /* 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); } .one .front { background: #fcc23d; } .one .back { background: #333; } .two .front { background: #f7a45e; } .two .back { background: #333; } .three .front { background: #f47e64; } .three .back { background: #333; } .four .front { background: #c4283d; } .four .back { background: #333; } .five .front { background: #662c90; } .five .back { background: #333; } .six .front { background: #1b98d2; } .six .back { background: #333; } .seven .front { background: #0d7ab5; } .seven .back { background: #333; } .eight .front { background: #07767f; } .eight .back { background: #333; } .nine .front { background: #253646; } .nine .back { background: #333; } .ten .front { background: #58595b; } .ten .back { background: #333; }