feat: even coooooooooler animations

src/app/tools/tankopedia/page.css.tsx

@@ -1,7 +1,15 @@
 import { style } from '@vanilla-extract/css';
 import { theme } from '../../../stitches.config';
 
-export const listing = style({});
+export const listing = style({
+  transition: `background-position ${theme.durations.regular}`,
+
+  backgroundPosition: 'left center',
+
+  ':hover': {
+    backgroundPosition: '-256px center',
+  },
+});
 
 export const listingShadow = style({
   boxShadow: `inset 0 -128px 128px -128px ${theme.colors.appBackground1}`,
@@ -22,9 +30,10 @@ export const listingLabel = style({
 
 export const listingImage = style({
   transition: `transform ${theme.durations.regular}`,
-  transform: 'translateX(25%) translateY(0)',
+  position: 'absolute',
+  left: '50%',
 
   [`.${listing}:hover &, .${listing}:active &`]: {
-    transform: 'translateX(25%) translateY(10%)',
+    transform: 'translate(-25%, 10%)',
   },
 });

src/app/tools/tankopedia/page.tsx

@@ -154,26 +154,38 @@ export default function Page() {
                   flex: 1,
                 }}
               >
-                <Card className={styles.listing}>
+                <Card
+                  className={styles.listing}
+                  style={{
+                    backgroundImage: `url(https://i.imgur.com/Iho9ATV.png)`,
+                    backgroundSize: 'contain',
+                    backgroundRepeat: 'no-repeat',
+                  }}
+                >
                   <Inset
                     key={tank.id}
                     style={{
-                      minHeight: 128,
                       minWidth: 256,
+                      minHeight: 128,
                       position: 'relative',
                       display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
                     }}
                   >
-                    <img
+                    <div
-                      className={styles.listingImage}
-                      src={tankIcon(tank.id)}
                       style={{
-                        objectFit: 'contain',
+                        width: 256,
-                        objectPosition: 'left center',
+                        height: 128,
                       }}
-                    />
+                      className={styles.listingImage}
+                    >
+                      <img
+                        src={tankIcon(tank.id)}
+                        style={{
+                          objectFit: 'contain',
+                          objectPosition: 'left center',
+                        }}
+                      />
+                    </div>
 
                     <div
                       className={styles.listingShadow}