title: Fix a problem for text overlapping on Image while zooming
body: <p>While zooming the page TEXT is overlapping with the Image, I am sharing my screenshot, Please look into that and can you please give me the solution.
  Thanks in Advance...<a href="https://i.stack.imgur.com/oVlGN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oVlGN.png" alt="Image"></a> </p>
  
  <p>This is the css Code, While zooming the page TEXT is overlapping with the Image,</p>
  
  <pre><code>.Pad{
      padding: 60px 0px;
      margin-top: -300px;
   }
  
   body {
      margin: 0;
  }
  
  .outer-div-for-the-imgae-icon{position:relative; display:block; height:300px; width:300px;   }
  
  .outer-div-for-the-imgae-icon img{height:300px; width:300px; object-fit:cover;}
  
  .outer-div-for-the-imgae-icon i{position:absolute; top:0; left:100%; font-size:40px;}
  </code></pre>
  
  <p>This is the HTML code, While zooming the page TEXT is overlapping with the Image,</p>
  
  <pre><code>&lt;div class="col-12 col-12 p-0"&gt;
                          &lt;div class="col-6 float-left"&gt;
                              &lt;div class="outer-div-for-the-imgae-icon"&gt;
                                  &lt;app-image [imagesrc]="imagePath" style="width: 190px;max-height: 190px;clip-path: square(25px at center);"
                                      class="d-none d-sm-block" alt="..."&gt;&lt;/app-image&gt;
                                  &lt;i (click)="inputFile.click()" style="color : white;left: 180px; 
                                  position: absolute; top: -5px; padding: 3px; background-color: rgb(0, 195, 255); 
                                  border-radius: 50%;font-size: 12px;"
                                      class="fa fa-pencil fa-lg" aria-hidden="true"&gt;&lt;/i&gt;
                              &lt;/div&gt;
  
                              &lt;div class="col-6 Pad float-right"&gt;
                                  &lt;div class="col-sm "&gt;
  
                                      &lt;span class="name"&gt;
                                          &lt;b style="color: rgb(25,25,112); font-size : 15px "&gt;{{myprofile?.FirstName}}
                                              {{myprofile?.LastName}}&lt;/b&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-sm"&gt;
  
                                      &lt;span class="name"&gt;
                                          &lt;p&gt;{{myprofile?.Role}}&lt;/p&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-sm"&gt;
  
                                      &lt;span class="name"&gt;
                                          &lt;p&gt;{{myprofile?.Phone}} {{myprofile?.UserName}}&lt;/p&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
  
  
  
  
          &lt;!-- end snippet --&gt;
  </code></pre>