Add rotating images to Shop module

2022-06-01 20:11:11 +02:00
parent 9ac9301540
commit 218676b9ca
3 changed files with 59 additions and 16 deletions
--- a/src/style/organisms/_shop.scss
+++ b/src/style/organisms/_shop.scss
@@ -17,11 +17,26 @@
        }
    }

-    // Image
-    &__image {
+    // Images
+    &__images {
        position: relative;
        overflow: hidden;

+        picture {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            transform: scale3d(1.075, 1.075, 1.075);
+            transition: opacity 0.8s, transform 1.6s var(--ease-quart);
+
+            &.is-visible {
+                opacity: 1;
+                transform: scale3d(1,1,1);
+            }
+        }
        img {
            display: block;
            width: 100%;