golf_backend/app/Views/profile.php

<style>
    /* profile pic */
body {
  font-family: sans-serif;
}

.profilepic {
  position: relative;
  /* width: 125px;
  height: 125px; */
  /* border-radius: 50%; */
  overflow: hidden;
  background-color: #fffff7;
}

.profilepic:hover .profilepic__content {
  opacity: 1;
}

.profilepic:hover .profilepic__image {
  opacity: .5;
}

.profilepic__image {
  object-fit: cover;
  opacity: 1;
  transition: opacity .2s ease-in-out;
}

.profilepic__content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: black;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.profilepic__icon {
  color: white;
  padding-bottom: 8px;
}

.fas {
  font-size: 20px;
}

.profilepic__text {
  text-transform: uppercase;
  font-size: 12px;
  width: 50%;
  text-align: center;
}
</style>
</br></br>
<div id="body1">
  <div class="page-title-box page-title-box-alt" style="margin-top:-50px">
      <h4 class="page-title">Profile</h4>
      <div class="page-title-right">
          <ol class="breadcrumb m-0">
              <li class="breadcrumb-item"><a href="<?= base_url() ?>user_edit/<?= md5($userList[0]['id']) ?>/profile_edit">
              <button type="button" class="btn btn-primary waves-effect waves-light">Edit</button>
              </a></li>
          </ol>
      </div>
  </div>
<div class="row">
<div class="col-lg-12 col-xl-12">
    <div class="card text-center">
        <div class="card-body">
        <form id="form" data-parsley-validate class="form-horizontal form-label-left" method="post" action="<?= base_url()."profilepic_insert"; ?>" enctype="multipart/form-data">
        <input id="id" name="id" value="<?= $userList[0]['id'] ?>" type="hidden" />
        <button type="submit" class="btn btn-success" hidden>Update</button>
                    <?php if ($userList[0]['profile'] == '') { ?>
                        <div class="profilepic"> 
                            <!-- <img style="width: 100%;height: 100%; display: block;" src="<?php echo base_url(); ?>/assets/uploads/profile_picture/profile.jpg" alt="Avatar" title="Change the avatar"> -->
                            <img src='<?php echo base_url()."/public/assets/images/users/avatar-1.jpg" ?>' class="rounded-circle avatar-xl img-thumbnail" alt="profile-image">
                            <input id="file_profile" name="profile" class="typeFile1" type="file" hidden/>
                            <div class="profilepic__content">
                              <span class="profilepic__icon"><i class="fa fa-camera" style="font-size:25px;color:#ddd"></i></span>
                              <!-- <span class="profilepic__text"><b>Edit Profile</b></span> -->
                            </div>
                        </div>
                    <?php } 
                     else { ?>
                        <div class="profilepic"> 
                            <!-- <img style="width: 100%;height: 100%; display: block;" src="<?php echo base_url(); ?>/assets/uploads/profile_picture/profile.jpg" alt="Avatar" title="Change the avatar"> -->
                            <img src='<?php echo base_url()."/public/assets/images/users/"?><?php echo $userList[0]['profile'] ?>' class="rounded-circle avatar-xl img-thumbnail" alt="profile-image">
                            <input id="file_profile" name="profile" class="typeFile1" type="file" hidden/>
                            <div class="profilepic__content">
                              <span class="profilepic__icon"><i class="fa fa-camera" style="font-size:25px;color:#ddd"></i></span>
                              <!-- <span class="profilepic__text"><b>Edit Profile</b></span> -->
                            </div>
                        </div>
                    <?php } ?>
        </form>

               <h4 class="mt-3 mb-0"><?= $userList[0]['name'] ?></h4>

               <div class="text-left mt-3">
                   <div class="table-responsive">        
                       <table class="table table-borderless table-sm">
                           <tbody>
                               <tr>
                                   <th scope="row">Name :</th>
                                   <td id="name" class="text-muted"><?= $userList[0]['name'] ?></td>
                               </tr>
                               <tr>
                                   <th scope="row">Mobile :</th>
                                   <td class="text-muted"><?= $userList[0]['mobile'] ?></td>
                               </tr>
                               <tr>
                                   <th scope="row">Email :</th>
                                   <td class="text-muted"><?= $userList[0]['email'] ?></td>
                               </tr>
                               <tr>
                                    <th scope="row">Location :</th>
                                    <td class="text-muted"><?= $userList[0]['address'] ?> , <?= $userList[0]['city_name'] ?> , <?= $userList[0]['state_name'] ?> , <?= $userList[0]['country_name'] ?> - <?= $userList[0]['pincode'] ?></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> <!-- end card-box -->
    </div> <!-- end col-->
</div>
</div>
<script>	
var reload = 0;
$(".profilepic").one('click',function() {
  reload = 1;
  $("#file_profile").trigger("click");
});

$("#file_profile").change(function(){
  reload = 2;
  $(".btn-success").click(); 
});

$('.profilepic').hover(function() {
  if (reload == 1) {
    location.reload();
  }
});
</script>