All images properly shown

src/assets/css/rankGuide.css

@@ -0,0 +1,45 @@
+/* RankGuide */
+/* Saving memory by getting the value from the same memory space, thus preventing placing same value in multiple memory adresses. */
+  :root{
+    --transitionTransformEasInOutDot3: transform .3s ease-in-out;
+    --zIndex11: 11;
+    --scale1Dot2: scale(1.2); 
+  }
+
+/* Keyframes */
+@keyframes rotate360 {
+  0% {
+    transform: rotateY(-220deg);
+    opacity: 0;
+  }
+  50%{
+    opacity: .4;
+  }
+  100% {
+    transform: rotateY(-360deg);
+    opacity: 1;
+  }
+}
+
+  @media (min-width: 992px) {
+  /* Elements in RankGuide.tsx */
+  .zoom-card {
+      transition: var(--transitionTransformEasInOutDot3);
+      animation: rotate360 1s linear;
+      z-index: 10;  
+    }
+
+    .zoom-card:hover {
+      transform: var(--scale1Dot2);
+      background-color: #000;
+      border: 1px solid #E3E3E3;
+      z-index: var(--zIndex11);
+    }
+
+    .zoom-card img { transition: var(--transitionTransformEasInOutDot3); }
+
+    .zoom-card:hover img {
+      transform: var(--scale1Dot2);
+      z-index: var(--zIndex11);
+    }
+  }

src/pages/RankGuide.tsx

@@ -2,10 +2,11 @@ import { PageContainer } from '@ant-design/pro-layout';
 import { Card, Typography } from 'antd';
 import React from 'react';
 import { useIntl } from 'umi';
+import '../assets/css/rankGuide.css'; 
 
-const { Meta } = Card;
-const { Text } = Typography;
-
+const { Meta } = Card; 
+const { Text } = Typography; 
+ 
 type RankInfo = {
   id: number;
   name: string;
@@ -882,14 +883,23 @@ export default (): React.ReactNode => {
 
   for (const rank of ranks) {
     const pathToImgAndShowRankEmblem = `/static/media/emblem/${rank.id}.png`;
-
     cards.push(
-      <div className="col-md-3 text-center">
-        <Card hoverable style={{ marginBottom: '16px', minHeight: '375px' }}>
-          <img src={`${pathToImgAndShowRankEmblem}`} />
-          <Meta title={rank.name} description={rank.description} style={{ marginBottom: '4px' }} />
+      <div className="col-md-3 text-center" key={rank.name}>
+        <Card
+          hoverable
+          className="zoom-card"
+          style={{ margin: '15px 0', height: '90%' }}
+        >
+          <img
+            style={{ height: '128px', objectFit: 'cover' }}
+            src={`${pathToImgAndShowRankEmblem}`} alt={rank.name}
+          />
+          <Card.Meta
+            style={{ marginBottom: '4px' }}
+            description={rank.description}  title={rank.name}
+          />
         </Card>
-      </div>,
+      </div>
     );
   }
 
@@ -898,4 +908,4 @@ export default (): React.ReactNode => {
       <div className="row">{cards}</div>
     </PageContainer>
   );
-};
+};