circle photo with div change color

Bootstrap snippet. circle photo with div change color, this snippet was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.
tags: user,photo

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="user-item">
            <img src="https://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="https://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>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

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;
}

                                    

Similar snippets

Bootstrap snippet bs4 profile settings page

bs4 profile settings page

View

Bootstrap snippet bs4 user card task list

bs4 user card task list

View

Bootstrap snippet bs4 user profile cover

bs4 user profile cover

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 20th 2015, 08:04

Views: 2.8K

Rated 5/5 based on 3 reviews