Bootstrap snippet: Cover Profile image with button

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: social,profile,user,cover,social network

<div class="container bootstrap snippets"> <div class="row"> <div class="col-md-12"> <div class="bg-picture" style="background-image:url('')"> <span class="bg-picture-overlay"></span><!-- overlay --> <!-- meta --> <div class="box-layout meta bottom"> <div class="col-md-6 clearfix"> <span class="img-wrapper pull-left m-r-15"><img src="" alt="" style="width:64px" class="br-radius"></span> <div class="media-body"> <h3 class="text-white mb-2 m-t-10 ellipsis">Deyson Bejarano</h3> <h5 class="text-white"> @elgrones</h5> </div> </div> <div class="col-md-6"> <div class="pull-right"> <div class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-primary" href="#" aria-expanded="false"> Following <span class="caret"></span></a> <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Poke</a></li> <li><a href="#">Private message</a></li> <li class="divider"></li> <li><a href="#">Unfollow</a></li> </ul> </div> </div> </div> </div> <!--/ meta --> </div> </div> </div> </div>
body{ margin-top:60px; background:#e9eaed; } .bg-picture { position: relative; min-height: 300px; margin: -20px -25px 0px -25px; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover; } .bg-picture>.bg-picture-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0d…0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=); background-image: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(0,0,0,.4) 100%); background-image: -o-linear-gradient(top,rgba(255,255,255,0) 0,rgba(0,0,0,.4) 100%); background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(rgba(0,0,0,.4))); background-image: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(0,0,0,.4) 100%); } .bg-picture>.meta.bottom { bottom: 10px; } .bg-picture>.meta { position: absolute; left: 0; right: 0; } .box-layout { display: table!important; width: 100%; table-layout: fixed; border-spacing: 0; } .m-r-15 { margin-right: 15px; } .media-body, .media-left, .media-right { display: table-cell; vertical-align: top; } .media-body { width: 10000px; } .media, .media-body { overflow: hidden; zoom: 1; } .m-t-10 { margin-top: 10px !important; } .text-white { color: #ffffff; } .h3, h3 { font-size: 24px; } .br-radius, .tiles, .tile-stats, .portlet { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

Cover Profile image with button

  Apr 19th, 07:45