Bootstrap snippet: circle photo with div change color

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: user,photo



<div class="row"> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="user-item"> <img src="http://lorempixel.com/500/500/people/6/" class="img-circle img-responsive img-user" alt=""> <div> <strong>Alexandra Human </strong> <small>Web Developer</small> <p> Curabitur nec nisl odio. Mauris vehicula at nunc id posuere. </p> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="user-item"> <img src="http://bootdey.com/img/Content/user-453533-fdadfd.png" class="img-circle img-responsive img-user" alt=""> <div> <strong>Martin Caricature </strong> <small>Web Developer</small> <p> Curabitur nec nisl odio. Mauris vehicula at nunc id posuere. </p> </div> </div> </div> </div>
body{ margin-top:20px; } .user-item { font-family: Verdana; position: relative; width: 100%; cursor: pointer; } .user-item > img { width: 100%; } .user-item > div small { display: block; color: #fff; padding-top: 10px; } .user-item > div p { color: #fff; padding-top: 10px; line-height: 16px; font-size: 12px; } .user-item > div { background: #5bc0de; bottom: -50px; line-height: 16px; padding: 15px 0; position: absolute; text-align: center; width: 100%; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; padding: 20px; } .user-item:hover > div { background: #5cb85c; bottom: -75px; color: #000000; } .img-user { padding: 4px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; }
Dey-Dey

circle photo with div change color

Dey-Dey
  Jul 10th 2015, 09:26
1.7K Views