CODEWITHSUNDEEP
javascriptphpjquerycsstwitter-bootstrap
user3262732
user3262732

Reputation: 246

create update profile picture in jquery and bootstrap

I am trying to perform functionality for update profile picture same like facebook update profile picture option.like when cursor hover over image user get the update profile picture div above on his picture and when user click on that div bootstrap model will be open that ask for the profile picture.

this is the code that i have done so far jsfiddle

<div class="col-sm-4">                              
    <img class="img-thumbnail" style="width:100%" src="<img src="bootstrap/assets/img/profiles/avatar2x.jpg'">
   <div class='picture-hover'>Update Profile Picture</div>
</div>

the problem that i encounter with this is picture-hover is not displaying on above the picture same as facebook.

2nd who can i display model for uploading picture when picture-hover is clicked.

Please point me into right direction

Upvotes: 0

Views: 7827

Answers (2)

Avnish Mehta
Avnish Mehta

Reputation: 99

This is a very detailed explanation for the question you have asked. I hope this helps you in some way !

Upvotes: -1

Dennis Weidmann
Dennis Weidmann

Reputation: 1967

Well Bootstrap doesn't have its own Image Overlay, so it is not possible to build this up without writing some own code.

If you follow this following example I found with Google you can do an overlay like this:

http://www.bootply.com/90238

HTML

<div class="container">
    <div class="row">
        <div class="col-md-3">            
            <div class="thumbnail">
                <div class="caption">
                    <h4>Thumbnail Headline</h4>
                    <p>short thumbnail description</p>
                    <p><a href="" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
                    <a href="" class="label label-default" rel="tooltip" title="Download now">Download</a></p>
                </div>
                <img src="http://lorempixel.com/400/300/sports/1/" alt="...">
            </div>
      </div>
</div>

CSS

.thumbnail {
    position:relative;
    overflow:hidden;
}

.caption {
    position:absolute;
    top:0;
    right:0;
    background:rgba(66, 139, 202, 0.75);
    width:100%;
    height:100%;
    padding:2%;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}

jQuery

$('.thumbnail').hover(
        function(){
            $(this).find('.caption').slideDown(250); //.fadeIn(250)
        },
        function(){
            $(this).find('.caption').slideUp(250); //.fadeOut(205)
        }
    );

Upvotes: 2

Related Questions