在动画期间隐藏溢出

Question

我有一个覆盖层，当用户的鼠标悬停在图像上时，它会在图像上滑动。问题是，叠加层从实际图像下方开始。我不希望它在图像空间之外显示。

我尝试在动画过程中添加溢出：“隐藏”属性。它似乎无能为力。

@Component({
  selector: 'app-game-gallery',
  templateUrl: './game-gallery.component.html',
  styleUrls: ['./game-gallery.component.css'],
  animations: [
    trigger('overlaySlide', [
      state('overlayIn', style({})),
      transition(':enter', [
        style({
          transform: 'translateY(100%)'
        }),
        animate('1s ease-in', )
      ]),
      transition(':leave', [
        style({
          transform: 'translateY(100%)',
          overflow: 'hidden'
        }),
        animate('1s ease-out')
      ])
    ])
  ]
})

<div id="gallery">
  <div id="image" *ngFor="let info of gameInfo" (mouseenter)="info.hover = true" (mouseleave)="info.hover = false">
    <img [src]=info.picture class="img-thumbnail" width="300px">
    <div class="overlay" [@overlaySlide] *ngIf="info.hover">
      ssds
    </div>
  </div>
</div>