Угловой: - при наведении курсора мыши, показать кнопку на изображении (из цикла * ngFor)

Question

<div *ngFor="let gallery of galleries; let i = index ">

      <img 
        [src]="imagesrc "
        alt="gallery thumbnail" (mouseenter)="enter(i)" (mouseleave)="leave(i)"/>

 <button class="btn btn-primary" *ngIf="hoverIndex == i">EDIT</button>
  </div>


 public enter(i) {
    this.hoverIndex = i;
   }

   public leave(i) {
    this.hoverIndex = null;
   }

Приведенный выше код работает для отображения / скрытия функциональности кнопки при наведении курсора. Но мне нужно добавить свойство для наведенного изображения, чтобы оно исчезало при наведении, а кнопка должна быть в центре изображения (теперь оно появляется справа).

Я не могу использовать posiiton:absolute, потому что это нарушит порядок изображений, поступающих с *ngFor.

Answer 1

Я забрал угловой код, чтобы показать вам, как добавление нескольких повторно используемых классов к выводимым элементам позволяет создавать приятные эффекты CSS, такие как зависание / затухание, которое вы ищете.

.gallery-item {
  display: inline-block;
  position: relative;
}

.gallery-img {
  opacity: 1;
  transition: opacity 0.3s ease-in; /* transition the opacity for nice fade */
}
.gallery-item:hover .gallery-img {
  opacity: 0; /* change opacity on wrapper div hover */
}
.gallery-button {
  display: block;
  position: absolute;
  width: 160px;
  height: 40px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}

<div class="gallery-item">
  <img src="https://picsum.photos/245" alt="gallery thumbnail" class="gallery-img" />
  <button class="btn btn-primary gallery-button">EDIT</button>
</div>