updated home page collection section

container/Home/Collection.js

@@ -137,7 +137,7 @@ const CollectionSlider = () => {
                 <img
                 <img
                   src={item.image}
                   src={item.image}
                   alt={item.title}
                   alt={item.title}
-                  className="img-fluid rounded-lg hover-zoom"
+                  className="img-fluid rounded-lg hover-zooms"
                 />
                 />
                 <p className="mt-3">{item.title}</p>
                 <p className="mt-3">{item.title}</p>
               </div>
               </div>

styles/globals.css

@@ -527,8 +527,32 @@ aspect-ratio: 16 / 7;
   transform: scale(1.03);
   transform: scale(1.03);
 }
 }
 .collectionSwiper .collection-card > img {
 .collectionSwiper .collection-card > img {
+ height: 240px;       /* 80% visible area */
+  overflow: hidden;
+  transition: height 0.4s ease;
+}
+
+
+.collectionSwiper .collection-card{
+  position: relative;
+  height: 450px;
+}
+.collectionSwiper .collection-card img {
   width: 100%;
   width: 100%;
+  height: 460px;      
+  object-fit: cover;
+  display: block;
+  transition: height 0.4s ease;   /* 👈 add this */
+  position: absolute;
+}
+
+.collectionSwiper .collection-card:hover img {
+  height: 478px;       
 }
 }
+
+
+
+
 /* ====Blog=== */
 /* ====Blog=== */
 .blog-date {
 .blog-date {
   color: #333;
   color: #333;