Changed hover animation for game-covers

This commit is contained in:
grimsi
2022-08-18 22:17:13 +02:00
parent 1fbfeb1c7e
commit 1a7016d2ab
2 changed files with 8 additions and 5 deletions
@@ -1,5 +1,5 @@
<a routerLink="/game/{{game.slug}}">
<div class="game-cover-container shine" [style.background-image]="'url(v1/images/' + game.coverId + ')'" fxLayoutAlign="center end">
<div class="game-cover-container shine enlarge" [style.background-image]="'url(v1/images/' + game.coverId + ')'" fxLayoutAlign="center end">
<h2 *ngIf="game.coverId === 'nocover'" class="no-link-stlying">{{game.title}}</h2>
</div>
</a>
@@ -6,12 +6,15 @@
width: 264px;
background-repeat: no-repeat;
background-position: center bottom;
@include mat.elevation-transition();
@include mat.elevation(4);
}
&:hover {
@include mat.elevation(24);
.enlarge {
transition: transform 280ms ease-out;
&:hover,
&:focus {
transform: scale(1.05);
}
}