While I hover the icon shows over image. But I want to display the icon like this
And while i click, it should allow to browse files like
<input type ='file'>
How can I do this?
I tried like putting the file tag to all, but it didn't worked. How can I do this?
.profile-img-container {
position: absolute;
width:50%;
}
.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 i {
display: none;
position: absolute;
margin-left:43%;
margin-top:40%;
}
.profile-img-container img {
position:absolute;
}
<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 src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
<i class="fa fa-upload fa-5x"></i>
</div>
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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With