<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="card hovercard"> <img src="http://placehold.it/300x200/000000/&text=Header" alt=""/> <div class="avatar"> <img src="http://placehold.it/80X80/333333/&text=Head" alt="" /> </div> <div class="info"> <div class="title"> The Title </div> <div class="desc">Lorem ipsum</div> <div class="desc">Lorem ipsum</div> <div class="desc">Lorem ipsum</div> </div> <div class="bottom"> <button class="btn btn-default">Button</button> </div> </div> </div>

.card { padding-top: 20px; margin: 10px 0 20px 0; background-color: #ffffff; border: 1px solid #d8d8d8; border-top-width: 0; border-bottom-width: 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card.hovercard { position: relative; width: 300px; padding-top: 0; overflow: hidden; text-align: center; background-color: #fff; } .card.hovercard img { width: 300px; height: 200px; } .card.hovercard .avatar { position: relative; top: -40px; margin-bottom: -40px; } .card.hovercard .avatar img { width: 80px; height: 80px; max-width: 80px; max-height: 80px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .card.hovercard .info { padding: 4px 8px 10px; } .card.hovercard .info .title { margin-bottom: 4px; font-size: 24px; line-height: 1; color: #262626; vertical-align: middle; } .card.hovercard .info .desc { overflow: hidden; font-size: 12px; line-height: 20px; color: #737373; text-overflow: ellipsis; } .card.hovercard .bottom { padding: 0 20px; margin-bottom: 17px; } .card.people .card-bottom { position: absolute; bottom: 0; left: 0; display: inline-block; width: 100%; padding: 10px 20px; line-height: 29px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }