<!DOCTYPE html> <html> <head> <title>Hit Me</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="wrapper"> <input id="flip" type="checkbox" name="flip-card"> <label for="flip"> <div class="card"> <div class="front"> <img src="http://www.arcane.org/assets/hitme-card-back.png" style="height: 100%"> </div> <div class="back"> <img src="http://www.arcane.org/assets/hitme-card-front.png"> </div> </div> </label> </div> </body> </html>
* { box-sizing: border-box; } body { background-image: url("http://www.arcane.org/assets/hitme-background.jpg"); } a { text-decoration: none; } .wrapper { max-width: 50rem; width: 100%; margin: 5rem auto; text-align: center; } #flip { display: none; } .card { padding: 0; display: block; width: 20rem; height: 32rem; margin: 0 auto; transform-style: preserve-3d; } #flip:not(:checked) + label > .card { transform: rotateY(0deg); transition: transform 0.25s; } #flip:checked + label > .card { transform: rotateY(180deg); transition: transform 0.25s; } .front, .back { overflow: hidden; position: absolute; width: 100%; height: 100%; box-shadow: rgba(0,0,0,0.2) 0 0 3rem 0, rgba(0,0,0,0.1) 0 0 1rem 0; } .front { transform: translateZ(2px); background: #a3ba60; border-radius: 2rem 2rem; color: #eaf5d7; } .front:after { content: 'HIT ME'; background-color:rgba(105,105,105,0.5); white-space: nowrap; position: absolute; top: 14rem; left: 5.5rem; right: 5.5rem; font-size: 2rem; font-weight: 800; line-height: 60px; cursor: pointer; visibility: hidden; opacity: 0; transition: opacity 0.1s; } .front:hover:after { visibility: visible; opacity: 1; transition: opacity 0.35s; } .back { border-radius: 2rem 2rem; transform: translateZ(-2px) rotateY(180deg); background: #fff; border: 1px solid #2d5077; padding-top: 1.7rem; } img { height: 100%; width: 100%; }