Jquery Image on Hover make input type file
You should add a input file in your code but make it invisible then you can get file browse with jQuery.
HTML:
<input id='uploadfile' type ='file'>
JS:
$('.profile-img-container img').click(function(){
$('#uploadfile').click();
});
Working Fiddle
Second way for future questions:
<input id='uploadfile' type ='file'>
input#uploadfile {
width: 200px;
height: 200px;
background: url('http://s3.amazonaws.com/37assets/svn/765-default-avatar.png');
border-radius: 50%;
display: block;
padding-top: 23.5%;
box-sizing: border-box;
overflow: hidden;
background-size: 100%;
}
Working Fiddle
You need to add an input[type="file"] to your code and make it invisible. Also, so it takes all the img place, set it position to absolute and all the other styles so it take all the place.
Like this:
.profile-img-container {
position: absolute;
/*width:50%;*/
/*border-radius:50%;*/
overflow:hidden;
}
.profile-img-container img:hover {
opacity: 0.5;
z-index: 501;
}
.profile-img-container img:hover + i {
display: block;
z-index: 500;
}
.profile-img-container .icon-wrapper {
position: absolute;
bottom:0;
left:0;
background:rgba(0,0,0,0.7);
color:#fff;
text-align:center;
width:100%;
padding:5px;
}
/*.profile-img-container img {
position:absolute;
}*/
/*.profile-img-container {
position:relative;
}*/
input[type="file"] {
opacity:0;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="profile-img-container img-circle">
<input type="file" />
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
<div class="icon-wrapper">
<i class="fa fa-upload fa-5x"></i>
</div>
</div>