diff --git a/pages/genres/genres.pixy b/pages/genres/genres.pixy index 988775d1..e8647639 100644 --- a/pages/genres/genres.pixy +++ b/pages/genres/genres.pixy @@ -3,7 +3,8 @@ component Genres .grid each genre in arn.Genres - a.grid-cell.ajax(href="/genres/" + arn.FixGenre(genre)) - .grid-text + a.grid-cell.backside-card.ajax(href="/genres/" + arn.FixGenre(genre)) + .grid-text.front GridIcon(arn.GetGenreIcon(genre)) - span= genre \ No newline at end of file + span= genre + img.grid-image.back(src="https://cdn.anilist.co/img/dir/anime/reg/21519-4I676N0vzuek.jpg", alt="") \ No newline at end of file diff --git a/styles/grid.styl b/styles/grid.styl index 37b14608..332ca427 100644 --- a/styles/grid.styl +++ b/styles/grid.styl @@ -6,6 +6,8 @@ .grid-cell uiElement() + + position relative flex-grow 0 flex-shrink 0 @@ -22,11 +24,38 @@ margin 0.5rem +.scale-out &:hover - transform scale(1.03) + transform scale(1.02) + +.backside-card + transition all transitionSpeed ease-in-out + + &:hover + transform rotateY(180deg) + + .front + opacity 0 + .back + opacity 1 // .grid-icon // transform scale(1.3) +.front + position absolute + left 0 + top 0 + opacity 1 + transition opacity transitionSpeed ease + +.back + position absolute + left 0 + top 0 + opacity 0 + transition opacity transitionSpeed ease + transform rotateY(180deg) + .grid-anime border none &:hover @@ -52,4 +81,5 @@ width 100% height 100% margin 0 + border-radius 3px object-fit cover \ No newline at end of file