Fixed weird hovering issues

src/components/cards/contactCard.astro

@@ -25,7 +25,7 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
   aria-label=`${site} - new window`
 >
   <article class="contact do-hover">
-    <Image src={loadedLogoImage} alt={logoAltText} />
+    <Image src={loadedLogoImage} alt={logoAltText} loading={'eager'}/>
     <div>
       <h2>{site}</h2>
     </div>
@@ -63,6 +63,7 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
   article:hover div {
     border-radius: 1.25rem;
     padding: 0 0.5rem;
+    margin: unset;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -71,6 +72,9 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
     height: calc(var(--size-value));
     width: calc(var(--size-value) - 1rem);
     opacity: 90%;
+    border-style: solid;
+    border-width: 10px;
+    border-color: var(--c-darkgray);
     z-index: 100;
     position: absolute;
   }

src/components/cards/favouriteCard.astro

@@ -25,7 +25,7 @@ const loadedImage = plsLoadImage(images, imagePath)
   aria-label=`${name} - new window`
 >
   <div class="heading">{name}</div>
-  <Image src={loadedImage} alt={name} />
+  <Image src={loadedImage} alt={name} loading={'eager'}/>
   <h2 class="subtext">
     {origin}
   </h2>

src/components/cards/technologyCard.astro

@@ -20,7 +20,7 @@ const loadedImage = plsLoadImage(images_logos, imagePath)
 
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
   <article>
-    <Image src={loadedImage} alt={logoAltText} />
+    <Image src={loadedImage} alt={logoAltText} loading={'eager'}/>
     <div>
       <h2>{title}</h2>
     </div>
@@ -70,6 +70,9 @@ const loadedImage = plsLoadImage(images_logos, imagePath)
     opacity: 90%;
     z-index: 100;
     position: absolute;
+    border-style: solid;
+    border-width: 10px;
+    border-color: var(--c-darkgray);
   }
 
   article:hover h2 {