如何创建显示上传图像的div

Question

我需要创建一个div，它将执行上传图像文件和显示相同文件的功能作为预览。

鼠标悬停到该div时，应使用相机图标显示不透明度= 0.5并上传照片。

＆＃13;

＆＃13;

.upload-Image {
    color: #D0D3D4;
    background-color: transparent;
    border: 1px solid #D0D3D4;
    border-top: none;
    border-left: none;
    border-right: none;
    margin-right: 2em;
    margin-left: -3em;
    margin-top: -1em;
    height: 200px;
    width: 200px;
    opacity: 0;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
}
   
.upload-Image:hover {
    opacity: 0.5;
    border-radius: 200%;
}
     
.dp {
    width: 128px;
    height: 128px;
    margin: 0 auto;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
    /*overflow: hidden;*/
    position: relative;
}

.edit-dp a {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    line-height: 130px;
    background-color: rgba(0, 0, 0, .9);
    text-align: center;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.dp:hover .edit-dp a {
    opacity: 0.5;
    border-radius: 200%;
}
   
.upload-hover {
    height: 20%;
    width: 20%;
}

＆＃13;

<div class="dragAndDrop fileinput-new" data-provides="fileinput"><span class="fileinput-new dp">
    <img ng-src="{{imageSrc}}" style="max-width: 280px; max-height: 210px;"/>
    <span class="fileinput-exists dp"><img ng-src="{{imageSrc}}" style="max-width: 280px; max-height: 210px;"/></span>
    <input class="upload-Image" type="file" ng-file-select="onFileSelect($files)"/>
    <div class="edit-dp">
        <a href="#/TalentMyProfile"><img class="upload-hover" src="css/images/Camera Filled-60.png">&nbsp;Upload Picture</a>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;