Css Animation (slide in image without grayscale)

public/css/dashboard.css

@@ -141,11 +141,29 @@ p
   background-color: rgba(0, 52, 94, 0.123) !important;
   border-radius: 5px;
 }
-img
+.img
 {
   width: 50%;
-    height: 100%;
+  height: 100%;
+  background-size: 100.5% 100%;
+  background-position: var(--p, 0);
+  transition: background-position 0.5s ease;
 }
+.imgtrue
+{
+  filter:grayscale(0.4);
+}
+.imgfalse
+{
+  filter:grayscale(0.7)
+}
+.card:hover >.card-content > .card-image > .imgtrue
+{
+  --p:20400%;
+  filter:grayscale(0);
+
+}
+.card
 
 /* width */
 ::-webkit-scrollbar {
@@ -167,14 +185,6 @@ img
   background: #064e4e; 
 }
 
-.imgtrue
-{
-  filter:grayscale(0.2) !important;
-}
-.imgfalse
-{
-  filter:grayscale(0.7) !important;
-}
 :root {
     --card-color: rgb(23, 23, 23);
 }
@@ -245,7 +255,7 @@ body {
     z-index: 1;
   }
 
-  .card > .card-content {
+  .card > .card-content{
     background-color: var(--card-color);
     border-radius: inherit;
     display: flex;
@@ -275,6 +285,7 @@ body {
     display: flex;
     margin-top:2vh;
     height: 140px;
+
     justify-content: center;
     overflow: hidden;
   }

public/js/dashboard.js

@@ -127,11 +127,11 @@ async function makeCards(data)
             card.style.setProperty("--mouse-y", `${y}px`);
             let interval = null;
             let target = card.children[0].children[1].children[0].children[0].children[0];
+            let imgTarget = card.children[0].children[0].children[0]
             card.addEventListener('mouseenter', ()=>
             {
                 const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                 let iteration = 0;
-                //clearInterval(interval);
                 interval = setInterval(() => 
                 {
                     target.innerText = target.innerText
@@ -144,18 +144,20 @@ async function makeCards(data)
                         return letters[Math.floor(Math.random() * 26)]
                     })
                     .join("");
-                
+                    
                     if(iteration >= target.dataset.value.length)
                     { 
                         clearInterval(interval);
                     }
                     iteration += 4 ;
                 }, 1)
+
             })
             card.addEventListener('mouseleave', ()=>
             {
                 clearInterval(interval);
                 target.innerText = target.dataset.value;
+                //reset
             })
         }
     }
@@ -166,8 +168,8 @@ async function makeCard(guild)
     const card = document.createElement('div')
     card.innerHTML =   `  <div id='${guild.id}'class="card">
     <div class="card-content ">
-      <div class="card-image img${guild.hasRem}">
-        <img src=${guild.icon}></img>
+      <div class="card-image ">
+        <div class="img img${guild.hasRem}" style="background-image:url(${guild.icon});"  ></div>
       </div>
       <div class="card-info-wrapper ${guild.hasRem}">
         <div class="card-info">
@@ -180,7 +182,7 @@ async function makeCard(guild)
     </div>
   </div>`
     return card
-
+ //background-position:0%;  filter:grayscale(${guild.hasRem?0.4:0.7})
 }
 async function getRules(guildID)
 {
@@ -501,4 +503,7 @@ function _updateFeed(element)
         else alert(res.error);  
     })
     .catch(console.error);
-}
+
+    
+}
+