✨ Add zoom on hover to home page's thumbnails

Author: ajaysskumar

TestArena/Blog/Common/Thumbnail.razor

@@ -11,6 +11,8 @@
 <style>
     .custom-size {
         max-width: 400px;
+        /* keep overflow hidden so the scaled card doesn't overflow layout */
+        overflow: hidden;
     }
     .thumbnail-img {
         width: 100%;
@@ -19,10 +21,29 @@
         border-radius: 0.375rem 0.375rem 0 0;
         background: #f8f9fa;
         display: block;
+        /* smooth filter transition for image brighten */
+        transition: filter 250ms ease;
+    }
+
+    /* Slight zoom of the whole component on hover */
+    .thumbnail-card {
+        transition: transform 220ms ease, box-shadow 220ms ease;
+        transform-origin: center center;
+        will-change: transform;
+    }
+
+    .thumbnail-card:hover {
+        transform: scale(1.04);
+        box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.12);
+    }
+
+    /* Subtle image brighten on hover */
+    .thumbnail-card:hover .thumbnail-img {
+        filter: brightness(1.04);
     }
 </style>
 
-<div class="card shadow-sm custom-size">
+<div class="card shadow-sm custom-size thumbnail-card">
     <a href="@BlogUrl">
         <img src="@ImageUrl" class="thumbnail-img" alt="@Title">
     </a>