Use file-Upload jQuery as mask overlay image

Expected behavior I'd like to use jquery upload file as an overlay mask on top of my card image Actual behavior overlay upload file already on a card even when I set this card background to transparency somehow work but not perfectly fit

.card.card-body.view.file-upload.has-preview {
background: transparent;

}

Resources (screenshots, code snippets etc.)

                  <!-- Card image -->
              <div class="view view-cascade ">
                <img class="card-img-top" src="https://mdbcdn.b-cdn.net/img/Both-sides-plain.png" alt="Card image cap">
                <div class="mask">

                        <div class="file-upload-wrapper">


                        <input type="file" id="input-file-disable-remove" data-default-file="https://mdbcdn.b-cdn.net/img/frame.png"
                        class="file_upload"  data-height="600" />
                        </div>
                <!-- <img class="card-img-top" src="https://mdbcdn.b-cdn.net/img/frame.png" alt="Card image cap"> -->
                </div>
              </div>