Genres use flip effect now

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
+				img.grid-image.back(src="https://cdn.anilist.co/img/dir/anime/reg/21519-4I676N0vzuek.jpg", alt="")

styles/grid.styl

@@ -7,6 +7,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