Jquery Image on Hover make input type file

Question

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

If I understand it correctly you actually want to make this image act as file upload. If so you might consider this - http://stackoverflow.com/questions/6461252/custom-upload-button — Frank, Feb 08 '16 at 08:36

Pedram · Answer 1 · 2016-02-08T08:57:17.493

6

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

edited Feb 08 '16 at 08:57

answered Feb 08 '16 at 08:38

Pedram

15,766
10
44
73

thanks, how can i make the upload icon always visible ? – Biz Dev B Feb 08 '16 at 08:40
your welcome, if I understand right, see this example [link](http://jsfiddle.net/sLb3thhy/3/) – Pedram Feb 08 '16 at 08:42

Mosh Feu · Accepted Answer · 2017-11-21T09:04:39.713

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>

Jquery Image on Hover make input type file

2 Answers2