Make PostCard appear when hovering a photo on the grid

2021-10-14 23:21:22 +02:00
parent 91923599e0
commit 0436008f35
1 changed files with 15 additions and 1 deletions
--- a/src/style/pages/_photos.scss
+++ b/src/style/pages/_photos.scss
@@ -338,12 +338,26 @@
                }
            }

+
            // Postcard
            .post-card {
                position: absolute;
                bottom: 0;
                right: 0;
-                display: none;
+                border-top-left-radius: 8px;
+                opacity: 0;
+                pointer-events: none;
+                // transform: translate3d(10%,25%,0) rotate(-2deg);
+                transform: translate3d(12%, 23%, 0) rotate(-5deg);
+                transition: opacity 0.4s var(--ease-quart), transform 1.2s var(--ease-quart);
+            }
+
+            // Show postcard on hover
+            &:hover {
+                .post-card {
+                    opacity: 1;
+                    transform: translate3d(3%,3%,0) rotate(2deg);
+                }
            }
        }
    }