0

I need to create a div which will do functions of uploading image file and displaying the same file as a preview.

In mouseover to that div should display opacity=0.5 with camera icon and upload picture.

.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%;
}
<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>
Tchopane
  • 161
  • 8
kalai
  • 167
  • 5
  • 22

0 Answers0