Css 使用图像缩放效果时保留重叠图标

当用户将鼠标悬停在“我的图像库”中的图像上时，我添加了图像缩放效果。我有一个红色的心形图标重叠每个图像（一个类似的按钮），这是重叠使用CSS网格。将鼠标悬停在图像上时，缩放效果会起作用，但图标会消失

我尝试过只在图像容器中添加缩放效果，但无法使用溢出：以这种方式隐藏，悬停时图像只是相互重叠

相关html：

<div class="gallery-container">
  <div class="image-container" *ngFor="let image of galleryList" [ngClass]="generatingClassName(image)">
    <div *ngIf="checkLike(image.imagePath) && isLoggedIn" class="heart-icon-container">
      <ion-icon name="heart" class="heart-icon" (click)="updateLike(image.imagePath)"></ion-icon>
    </div>
    <div *ngIf="!checkLike(image.imagePath) && isLoggedIn" class="heart-icon-container">
      <ion-icon name="heart-outline" class="heart-icon" (click)="updateLike(image.imagePath)"></ion-icon>
    </div>
    <img [src]="image.imagePath" alt="Praying to the Sun" class="image" (click)="onImageSelect(image)">
  </div>
</div>

应用程序未悬停在任何图像上时的屏幕截图：

将鼠标悬停在图像上时应用程序的屏幕截图（请参见顶部一行，右侧2个图像）：

.image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    box-shadow: white 1px;
}

.image-container {
    display: grid;
    overflow: hidden;
    grid-template-columns: 1; 
    grid-template-rows: 1;
    cursor: pointer;
    width: auto;
    height: auto;
    border: 1px white solid;

}

.image-container img {
  transition: transform .5s ease;
}

.image-container:hover img {
  transform: scale(1.05);
}