<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-lg-12 col-sm-12"> <div class="card hovercard"> <div class="cardheader"> </div> <div class="avatar"> <img alt="" src="http://lorempixel.com/100/100/people/9/"> </div> <div class="info"> <div class="title"> <a target="_blank" href="http://scripteden.com/">Script Eden</a> </div> <div class="desc">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</div> </div> <div class="bottom"> <a class="btn btn-primary btn-twitter btn-sm" href="https://twitter.com/webmaniac"> <i class="fa fa-twitter"></i> </a> <a class="btn btn-danger btn-sm" rel="publisher" href="https://plus.google.com/+ahmshahnuralam"> <i class="fa fa-google-plus"></i> </a> <a class="btn btn-primary btn-sm" rel="publisher" href="https://plus.google.com/shahnuralam"> <i class="fa fa-facebook"></i> </a> <a class="btn btn-warning btn-sm" rel="publisher" href="https://plus.google.com/shahnuralam"> <i class="fa fa-behance"></i> </a> </div> </div> </div> </div> </div>

.card { padding-top: 20px; margin: 10px 0 20px 0; background-color: rgba(214, 224, 226, 0.2); 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 .card-heading { padding: 0 20px; margin: 0; } .card .card-heading.simple { font-size: 20px; font-weight: 300; color: #777; border-bottom: 1px solid #e5e5e5; } .card .card-heading.image img { display: inline-block; width: 46px; height: 46px; margin-right: 15px; vertical-align: top; border: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .card .card-heading.image .card-heading-header { display: inline-block; vertical-align: top; } .card .card-heading.image .card-heading-header h3 { margin: 0; font-size: 14px; line-height: 16px; color: #262626; } .card .card-heading.image .card-heading-header span { font-size: 12px; color: #999999; } .card .card-body { padding: 0 20px; margin-top: 20px; } .card .card-media { padding: 0 20px; margin: 0 -14px; } .card .card-media img { max-width: 100%; max-height: 100%; } .card .card-actions { min-height: 30px; padding: 0 20px 20px 20px; margin: 20px 0 0 0; } .card .card-comments { padding: 20px; margin: 0; background-color: #f8f8f8; } .card .card-comments .comments-collapse-toggle { padding: 0; margin: 0 20px 12px 20px; } .card .card-comments .comments-collapse-toggle a, .card .card-comments .comments-collapse-toggle span { padding-right: 5px; overflow: hidden; font-size: 12px; color: #999; text-overflow: ellipsis; white-space: nowrap; } .card-comments .media-heading { font-size: 13px; font-weight: bold; } .card.people { position: relative; display: inline-block; width: 170px; height: 300px; padding-top: 0; margin-left: 20px; overflow: hidden; vertical-align: top; } .card.people:first-child { margin-left: 0; } .card.people .card-top { position: absolute; top: 0; left: 0; display: inline-block; width: 170px; height: 150px; background-color: #ffffff; } .card.people .card-top.green { background-color: #53a93f; } .card.people .card-top.blue { background-color: #427fed; } .card.people .card-info { position: absolute; top: 150px; display: inline-block; width: 100%; height: 101px; overflow: hidden; background: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card.people .card-info .title { display: block; margin: 8px 14px 0 14px; overflow: hidden; font-size: 16px; font-weight: bold; line-height: 18px; color: #404040; } .card.people .card-info .desc { display: block; margin: 8px 14px 0 14px; overflow: hidden; font-size: 12px; line-height: 16px; color: #737373; text-overflow: ellipsis; } .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; } .card.hovercard { position: relative; padding-top: 0; overflow: hidden; text-align: center; background-color: rgba(214, 224, 226, 0.2); } .card.hovercard .cardheader { background: url("http://lorempixel.com/850/280/nature/4/"); background-size: cover; height: 135px; } .card.hovercard .avatar { position: relative; top: -50px; margin-bottom: -50px; } .card.hovercard .avatar img { width: 100px; height: 100px; max-width: 100px; max-height: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 5px solid rgba(255,255,255,0.5); } .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; } .btn{ border-radius: 50%; width:32px; height:32px; line-height:18px; }