<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 ----------> <div class="card level-3"> <h5>Floating Card</h5> </div>

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300); body { background: #eeeeee; font-family: 'Roboto', sans-serif; } * { box-sizing: border-box; } .card { background-color: #fff; border-radius: 4px; max-width: 400px; margin: 10% auto; height: 100px; position: relative; padding: 34px; color: #444; cursor: pointer; } .card:before { content: ''; display: block; position: absolute; background-color: #ccc; left: 20px; right: 20px; bottom: 0; top: 50%; z-index: -1; box-shadow: 0 0 40px #999999; transition: box-shadow .2s ease-in-out; } .card.level-3:hover:before { box-shadow: 0 0 80px #999999; } .card h5 { font-weight: 300; font-size: 30px; }