Change Location hover photo change effect

2021-10-02 13:24:17 +02:00
parent a47617d895
commit ec77cde75d
2 changed files with 19 additions and 12 deletions
--- a/src/style/molecules/_location.scss
+++ b/src/style/molecules/_location.scss
@@ -109,7 +109,7 @@
        left: 50%;
        width: 240px;
        height: 160px;
-        background: #444;
+        background: #222;
        border-radius: 6px;
        transform: translate3d(calc(-50% + var(--offset-x)), calc(-50% + var(--offset-y)), 0) rotate(var(--rotate));
        overflow: hidden;
@@ -122,7 +122,13 @@
        }

        picture {
-            display: none;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            transition: opacity 0.3s;

            img {
                display: block;
@@ -132,7 +138,7 @@
            }

            &.is-visible {
-                display: block;
+                opacity: 1;
            }
        }
    }