JQuery Image on Hover creates input type file

Question

When you hover over the icon is displayed above the image. But I want the icon to display as follows

And while I click, it should let me browse files like

<input type ='file'> 

How can i do this?

I tried to put a file tag for everyone, but that didn't work. 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> 

violin

Answer 1

You need to add input[type="file"] to your code and make it invisible. In addition, therefore, it takes up all the img space, set its position to absolute and all other styles so that it takes up all the places.

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> 

Answer 2

You must add the input file to your code, but make it invisible, after which you can view the file using jQuery.

HTML:

 <input id='uploadfile' type ='file'> 

JS:

 $('.profile-img-container img').click(function(){ $('#uploadfile').click(); }); 

Working script

The 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 script