<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="col-lg-4 col-sm-6"> <div class="card hovercard"> <div class="card-background"> <img class="card-bkimg" alt="" src="http://lorempixel.com/850/280/people/9/"> </div> <div class="useravatar"> <img alt="" src="http://lorempixel.com/100/100/people/9/"> </div> <div class="card-info"> <span class="card-title">Pamela Anderson</span> </div> </div> <div class="btn-pref btn-group btn-group-justified btn-group-lg" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" id="stars" name="stars" value="1" /><span class="glyphicon glyphicon-star" aria-hidden="true"></span> <div class="hidden-xs">Stars</div> </label> <label class="btn btn-default"> <input type="radio" id="favorites" name="favorites" value="2" /><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> <div class="hidden-xs">Favorites</div> </label> <label class="btn btn-default"> <input type="radio" id="following" name="following" value="3" /><span class="glyphicon glyphicon-user" aria-hidden="true"></span> <div class="hidden-xs">Following</div> </label> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="card hovercard"> <div class="card-background"> <img alt="" src="http://lorempixel.com/850/280/people/1/"> </div> <div class="useravatar"> <img alt="" src="http://lorempixel.com/100/100/people/1/"> </div> <div class="card-info"> <span class="card-title">Britney Spears</span> </div> </div> <div class="btn-pref btn-group btn-group-justified btn-group-lg" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" id="stars" name="stars" value="1" /><span class="glyphicon glyphicon-star" aria-hidden="true"></span> <div class="hidden-xs">Stars</div> </label> <label class="btn btn-default"> <input type="radio" id="favorites" name="favorites" value="2" /><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> <div class="hidden-xs">Favorites</div> </label> <label class="btn btn-default"> <input type="radio" id="following" name="following" value="3" /><span class="glyphicon glyphicon-user" aria-hidden="true"></span> <div class="hidden-xs">Following</div> </label> </div> </div> </div> </div>

/* USER PROFILE PAGE */ .card { margin-top: 20px; padding: 30px; background-color: rgba(214, 224, 226, 0.2); -webkit-border-top-left-radius:5px; -moz-border-top-left-radius:5px; border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-top-right-radius:5px; border-top-right-radius:5px; -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: #fff; background-color: rgba(255, 255, 255, 1); } .card.hovercard .card-background { height: 130px; } .card-background img { -webkit-filter: blur(25px); -moz-filter: blur(25px); -o-filter: blur(25px); -ms-filter: blur(25px); filter: blur(25px); margin-left: -100px; margin-top: -100px; min-width: 120%; } .card.hovercard .useravatar { position: absolute; top: 15px; left: 0; right: 0; } .card.hovercard .useravatar 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 .card-info { position: absolute; bottom: 14px; left: 0; right: 0; } .card.hovercard .card-info .card-title { padding:0 5px; font-size: 20px; line-height: 1; color: #262626; background-color: rgba(255, 255, 255, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .card.hovercard .card-info { overflow: hidden; font-size: 12px; line-height: 20px; color: #737373; text-overflow: ellipsis; } .card.hovercard .bottom { padding: 0 20px; margin-bottom: 17px; } .btn-pref label { padding-top: 0; -webkit-border-radius:0 !important; }