diff --git a/src/components/common/ServiceCard.astro b/src/components/common/ServiceCard.astro
index 49272a8..9dfb820 100644
--- a/src/components/common/ServiceCard.astro
+++ b/src/components/common/ServiceCard.astro
@@ -94,15 +94,18 @@ const cardId = `service-card-${crypto.randomUUID().slice(0, 8)}`;
     overflow: hidden;
     position: relative;
     
-    /* Transitions */
+    /* Enhanced transitions for smoother mode changes */
     transition: 
       transform var(--card-transition-duration) var(--card-transition-timing),
       box-shadow var(--card-transition-duration) var(--card-transition-timing),
       border-color var(--card-transition-duration) var(--card-transition-timing),
-      background-color var(--card-transition-duration) var(--card-transition-timing);
+      border var(--card-transition-duration) var(--card-transition-timing),
+      background-color var(--card-transition-duration) var(--card-transition-timing),
+      opacity var(--card-transition-duration) var(--card-transition-timing),
+      padding var(--card-transition-duration) var(--card-transition-timing);
     
     /* Performance optimizations */
-    will-change: transform, box-shadow, border-color;
+    will-change: transform, box-shadow, border-color, background-color, opacity;
   }
   
   /* Gradient background effect */
@@ -139,6 +142,18 @@ const cardId = `service-card-${crypto.randomUUID().slice(0, 8)}`;
       transform var(--card-transition-duration) var(--card-transition-timing);
   }
   
+  /* Enhanced background glow in image-only mode */
+  :global(.display-image-only) .service-icon-background {
+    transition: 
+      opacity calc(var(--card-transition-duration) * 1.5) var(--card-transition-timing),
+      transform calc(var(--card-transition-duration) * 1.5) var(--card-transition-timing);
+  }
+  
+  :global(.display-image-only) .service-card:hover .service-icon-background {
+    opacity: 0.25;
+    transform: scale(1.8);
+  }
+  
   /* Icon image */
   .service-icon {
     width: var(--icon-size);
@@ -150,6 +165,18 @@ const cardId = `service-card-${crypto.randomUUID().slice(0, 8)}`;
       filter var(--card-transition-duration) var(--card-transition-timing);
   }
   
+  /* Special icon animation for image-only mode */
+  :global(.display-image-only) .service-icon {
+    transition: 
+      transform calc(var(--card-transition-duration) * 1.2) var(--card-transition-timing),
+      filter var(--card-transition-duration) var(--card-transition-timing);
+  }
+  
+  :global(.display-image-only) .service-card:hover .service-icon {
+    transform: scale(1.15) rotate(3deg);
+    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.15));
+  }
+  
   /* Service name */
   .service-name {
     margin-top: 0.5rem;
@@ -229,6 +256,37 @@ const cardId = `service-card-${crypto.randomUUID().slice(0, 8)}`;
     display: flex;
     justify-content: center;
     align-items: center;
+    transform: translateY(0);
+    transition: 
+      transform var(--card-transition-duration) var(--card-transition-timing),
+      filter var(--card-transition-duration) var(--card-transition-timing);
+  }
+  
+  /* Enhanced icon effects in image-only mode */
+  :global(.display-image-only) .service-card:hover .service-icon-container {
+    transform: translateY(-2px) scale(1.02);
+  }
+  
+  /* Smooth animation for card background in image-only mode */
+  :global(.display-image-only) .service-card {
+    background-color: transparent;
+    border-color: transparent;
+    border-width: 0;
+    box-shadow: none;
+    /* Add slight scale effect during transition */
+    transform: scale(1.01);
+  }
+  
+  /* Adjust hover/active states in image-only mode */
+  :global(.display-image-only) .service-card:hover {
+    transform: translateY(-4px) scale(1.03);
+    border-color: transparent;
+    background-color: transparent;
+    box-shadow: none;
+  }
+  
+  :global(.display-image-only) .service-card:hover::before {
+    opacity: 0;
   }
   
   /* Name only mode */