Add hover effect on Homepage collage PhotoCard

src/style/molecules/_photo-card.scss

@@ -2,9 +2,18 @@
     picture {
         width: 100%;
         height: 100%;
-        overflow: hidden;
+        background: $color-primary-tertiary20;
+    }
+    & > * {
         border-radius: 8px;
+    }
+    a {
+        display: block;
+        overflow: hidden;
+        cursor: zoom-in;
         box-shadow: 0 16px 12px rgba(#000, 0.15), 0 26px 52px rgba(#000, 0.2);
+        transition: transform 0.7s var(--ease-quart);
+        will-change: transform;
     }
     img {
         display: block;
@@ -12,4 +21,85 @@
         height: 100%;
         object-fit: cover;
     }
+
+    // Informations
+    &__info {
+        position: absolute;
+        z-index: 2;
+        bottom: 16px;
+        left: 20px;
+        right: 20px;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        color: $color-cream;
+        font-size: clamp(#{rem(14px)}, 1.25vw, #{rem(16px)});
+
+        picture {
+            width: 24px;
+            height: 24px;
+            margin-right: 16px;
+            border-radius: 100%;
+            overflow: hidden;
+
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+        p {
+            max-width: min(80%, 300px);
+            line-height: 1.4;
+        }
+
+        & > * {
+            opacity: 0;
+            transform: translate3d(0, 8px, 0);
+            transition: opacity 0.8s var(--ease-quart), transform 0.8s var(--ease-quart);
+
+            @include bp (md) {
+                transform: translate3d(0, 16px, 0);
+            }
+        }
+    }
+
+    // Gradient
+    a:after {
+        content: "";
+        display: block;
+        opacity: 0;
+        position: absolute;
+        z-index: 1;
+        pointer-events: none;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 50%;
+        background: linear-gradient(180deg, rgba(#2D1745, 0) 0%, #2D1745 100%);
+        transition: opacity 0.8s var(--ease-quart);
+    }
+
+    // Slightly zoom in and show info on hover
+    @media (hover: hover) {
+        a:hover {
+            transform: scale(1.0375) rotate(2deg) translateZ(0);
+
+            .photo-card__info {
+                & > * {
+                    opacity: 1;
+                    transform: translate3d(0,0,0);
+                }
+                picture {
+                    transition-delay: 60ms;
+                }
+                p {
+                    transition-delay: 120ms;
+                }
+            }
+            &:after {
+                opacity: 1;
+            }
+        }
+    }
 }