I am looking to create a feature where a slide overlay appears from the bottom of a thumbnail when the user hovers over it, and retracts when the user is not hovering.
animations: [
trigger('overlaySlide', [
state('in', style({})),
transition(':enter', [
style({
transform: 'translateX(-100%)'
}),
animate('0.5s ease')
]),
transition(':leave', [
style({
transform: 'translateX(-100%)'
}),
animate('0.5s ease')
])
])
]<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="gallery" class="text-center">
<ng-container *ngFor="let picture of gameImages">
<img src="/assets/images/maple.jpg" class="img-thumbnail">
<div class="overlay">
<div class="overlay-text" [@overlaySlide]> Hello World</div>
</div>
</ng-container>
</div>