"card"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/bnhovde/pen/NqWmRv?depth=everything&order=popularity&page=66&q=card&show_forks=false" /> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css'> <style class="cp-pen-styles">.card { display: inline-block; flex: 1; position: relative; min-width: 300px; height: 10rem; margin: .1rem; font-family: 'Lato', sans-serif; text-align: center; text-decoration: none; color: white; background-color: #3979B7; overflow: hidden; } .card__icon { display: block; position: absolute; top: 10px; right: 0; width: 50px; line-height: 2rem; text-align: center; transition: all 0.2s ease-in-out; } .card__circle { display: block; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background-color: white; border-radius: 50%; opacity: 0.2; transition: all 0.4s ease-in-out; } .card > p { position: relative; top: 50%; margin: 0 2rem; text-transform: uppercase; letter-spacing: 1px; transform: translateY(-50%); transition: all 0.2s ease-in-out; } .card--alt-1 { background-color: #7E3F82; } .card--alt-2 { background-color: #39B764; } .card--alt-3 { background-color: #CC3F82; } .card--alt-4 { background-color: #EF7C2B; } .card:hover .card__circle { transform: scale(70); opacity: 0.8; } .card:hover > p, .card:hover .card__icon { color: #45556E; } .container { display: flex; flex-flow: row wrap; align-content: stretch; } </style></head><body> <link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'> <div class="container"> <a href="#" class="card"> <i class="card__circle"></i> <i class="card__icon fa fa-info"></i> <p>1 weird trick to regrow limbs</p> </a> <a href="#" class="card card--alt-1"> <i class="card__circle"></i> <i class="card__icon fa fa-info"></i> <p>Controversial BS-pill sweeps nation</p> </a> <a href="#" class="card card--alt-2"> <i class="card__circle"></i> <i class="card__icon fa fa-info"></i> <p>Man eats own head</p> </a> <a href="#" class="card card--alt-3"> <i class="card__circle"></i> <i class="card__icon fa fa-info"></i> <p>Doctors hate this one weird trick</p> </a> <a href="#" class="card card--alt-4"> <i class="card__circle"></i> <i class="card__icon fa fa-info"></i> <p>10 ways to get rich by clicking on stuff</p> </a> <a href="#" class="card"> <i class="card__circle"></i> <i class="card__icon fa fa-info"></i> <p>1 weird trick to regrow limbs</p> </a> <a href="#" class="card card--alt-1"> <i class="card__circle"></i> <i class="card__icon fa fa-info"></i> <p>Controversial BS-pill sweeps nation</p> </a> <a href="#" class="card card--alt-2"> <i class="card__circle"></i> <i class="card__icon fa fa-info"></i> <p>Man eats own head</p> </a> <a href="#" class="card card--alt-3"> <i class="card__circle"></i> <i class="card__icon fa fa-info"></i> <p>Doctors hate this one weird trick</p> </a> <a href="#" class="card card--alt-4"> <i class="card__circle"></i> <i class="card__icon fa fa-info"></i> <p>10 photos you won't believe are made from pixels</p> </a> </div> </body></html>

Questions / Comments: