Add transition hover effect

app.vue

@@ -157,4 +157,12 @@ ul.dropdown-menu {
 .bg-dark-gradient {
   background: linear-gradient(0deg, #000, transparent),linear-gradient(0deg, #000, transparent);
 }
+
+.trans-hover-grow {
+  transition: all 0.25s ease-in-out;
+
+  &:hover {
+    transform: scale(1.0625);
+  }
+}
 </style>

pages/champions/index.vue

@@ -22,12 +22,12 @@ watch(currentLocale, async () => {
             data-aos="zoom-out"
             data-aos-duration="500">
             <NuxtLink :to="`/champions/${summary.id}`">
-                <div class="ratio ratio-16x9 position-relative">
+                <div class="ratio ratio-16x9 position-relative trans-hover-grow">
                     <img class="object-fit-cover rounded" 
                         :src="skins.find(x => (x.id / 1000) == summary.id)?.getTile({locale: currentLocale, version: 'latest'})"
                         loading="lazy"/>
                     <div class="position-absolute z-1 d-flex flex-column justify-content-end">
-                        <div class="d-inline-flex justify-content-between align-items-center px-2" style="background: #0008;">
+                        <div class="d-inline-flex justify-content-between align-items-center px-2 bg-dark-gradient rounded-bottom">
                             <span class="fs-5 fw-light">{{ summary.name }}</span>
                             <span class="fw-bold">{{ summary.id }}</span>
                         </div>

pages/cherry-augments/index.vue

@@ -34,12 +34,12 @@ const filteredCherryAugments = computed(() => {
       </div>
     </div>
 
-    <div class="d-flex flex-wrap justify-content-around gap-2">
+    <div class="d-flex flex-wrap justify-content-around gap-4">
       <div v-for="cherryAugment in filteredCherryAugments" :id="`${cherryAugment.id}-${cherryAugment.nameTRA}`"
         style="width: 200px;"
         data-aos="zoom-out"
         data-aos-duration="500">
-        <div class="ratio ratio-1x1 position-relative">
+        <div class="ratio ratio-1x1 position-relative trans-hover-grow">
           <img class="rounded app-background p-4" :src="cherryAugment.getAugmentSmallIcon('latest')" loading="lazy"/>
           <div class="position-absolute z-1 d-flex flex-column justify-content-end">
             <div class="d-inline-flex justify-content-between align-items-center p-1" style="background: #0008;" >

pages/companions/index.vue

@@ -43,7 +43,7 @@ const p = computed(() => {
       <div style="width: 350px;" v-for="companion in p.pages[p.index.value]"
         data-aos="zoom-out"
         data-aos-duration="500">
-        <div class="ratio ratio-16x9 position-relative">
+        <div class="ratio ratio-16x9 position-relative trans-hover-grow">
           <img class="object-fit-cover rounded" :src="companion.getLoadoutsIcon('latest')" loading="lazy" />
           <div class="position-absolute z-1 d-flex flex-column justify-content-end">
             <div class="d-inline-flex justify-content-between align-items-center p-2 bg-dark-gradient rounded">

pages/items/index.vue

@@ -17,7 +17,7 @@ watch(currentLocale, async () => {
             data-aos="zoom-out"
             data-aos-duration="500">
             <NuxtLink :to="`/items/${item.id}`">
-                <div class="ratio ratio-1x1 position-relative">
+                <div class="ratio ratio-1x1 position-relative trans-hover-grow">
                     <img class="rounded" :src="item.getIcon('latest')" loading="lazy"/>
                     <div class="position-absolute z-1 d-flex flex-column justify-content-end">
                         <div class="d-inline-flex justify-content-end align-items-center">

pages/loots/index.vue

@@ -72,7 +72,7 @@ watch(currentLocale, async() => {
       <div style="width: 225px;" v-for="loot in p.pages[p.index.value]" :id="`${loot.id}`"
         data-aos="zoom-out"
         data-aos-duration="500">
-        <div class="ratio ratio-1x1 position-relative">
+        <div class="ratio ratio-1x1 position-relative trans-hover-grow">
           <img class="app-background rounded" :src="loot.getImage('latest')" loading="lazy"/>
           <div class="position-absolute z-1 d-flex flex-column justify-content-end">
             <div class="d-inline-flex justify-content-between align-items-end bg-dark-gradient rounded p-2">

pages/summoner-emotes/index.vue

@@ -40,7 +40,7 @@ const p = computed(() => {
       <div style="width: 200px;" v-for="summonerEmote in p.pages[p.index.value]"
         data-aos="zoom-out"
         data-aos-duration="500">
-        <div class="ratio ratio-1x1 position-relative">
+        <div class="ratio ratio-1x1 position-relative trans-hover-grow">
           <img class="app-backgroud rounded" :src="summonerEmote.getInventoryIcon('latest')" loading="lazy"/>
           <div class="position-absolute z-1 d-flex flex-column justify-content-end">
             <div class="d-inline-flex justify-content-between bg-dark-gradient p-1 m-2 rounded-bottom">

pages/summoner-icons/index.vue

@@ -41,7 +41,7 @@ const p = computed(() => {
         <div style="width: 200px;" v-for="summonerIcon in p.pages[p.index.value]"
             data-aos="zoom-out"
             data-aos-duration="500">
-            <div class="ratio ratio-1x1 position-relative">
+            <div class="ratio ratio-1x1 position-relative trans-hover-grow">
                 <img :src="summonerIcon.getImage('latest')" loading="lazy" class="rounded"/>
                 <div class="position-absolute z-1 d-flex flex-column justify-content-end">
                     <div class="d-inline-flex justify-content-between align-items-end bg-dark-gradient rounded-bottom p-2">

pages/tft-damage-skins/index.vue

@@ -38,7 +38,7 @@ const p = computed(() => {
       <div style="width: 200px;" v-for="tftDamageSkin in tftDamageSkins" :id="`${tftDamageSkin.itemId}`"
         data-aos="zoom-out"
         data-aos-duration="500">
-        <div class="ratio ratio-1x1 position-relative">
+        <div class="ratio ratio-1x1 position-relative trans-hover-grow">
           <img class="rounded" :src="tftDamageSkin.getLoadoutsIcon('latest')" loading="lazy"/>
           <div class="position-absolute z-1 d-flex flex-column justify-content-end">
             <div class="d-inline-flex justify-content-between align-items-end bg-dark-gradient p-2">

pages/tft-map-skins/index.vue

@@ -37,7 +37,7 @@ const p = computed(() => {
       <div style="width: 350px;" v-for="tftMapSkin in tftMapSkins" :id="`${tftMapSkin.itemId}`"
         data-aos="zoom-out"
         data-aos-duration="500">
-        <div class="ratio ratio-4x3 position-relative">
+        <div class="ratio ratio-4x3 position-relative trans-hover-grow">
           <img class="object-fit-cover rounded" :src="tftMapSkin.getLoadoutsIcon('latest')" loading="lazy"/>
           <div class="position-absolute z-1 d-flex flex-column justify-content-end">
             <div class="d-inline-flex justify-content-between align-items-end bg-dark-gradient p-2 rounded">

pages/ward-skins/index.vue

@@ -48,7 +48,7 @@ const rarities = {
             style="width: 225px;"
             data-aos="zoom-out"
             data-aos-duration="500">
-            <div class="ratio ratio-1x1 position-relative">
+            <div class="ratio ratio-1x1 position-relative trans-hover-grow">
                 <img class="rounded app-background p-4" :src="wardSkin.getWardShadowImage('latest')" loading="lazy"/>
                 <img class="rounded p-4" :src="wardSkin.getWardImage('latest')" loading="lazy"/>
                 <div class="position-absolute z-1 d-flex flex-column justify-content-end">