Add hover effect on Location

src/style/molecules/_location.scss

@@ -1,10 +1,42 @@
 .location {
+    position: relative;
     text-align: center;
 
-    & > * {
+    a {
         display: flex;
         flex-direction: column;
         justify-content: center;
+        padding: 24px;
+        text-decoration: none;
+
+        // Background circle
+        &:after {
+            opacity: 0;
+            content: "";
+            display: block;
+            position: absolute;
+            pointer-events: none;
+            top: 50%;
+            left: 50%;
+            width: 256px;
+            height: 256px;
+            transform: translate3d(-50%, -50%, 0) scale(0.8);
+            transform-origin: 50% 50%;
+            background-color: rgba($color-tertiary, 0.1);
+            border-radius: 100%;
+            transition: transform 0.75s var(--ease-quart), opacity 0.75s var(--ease-quart);
+        }
+
+        // Hover
+        &:hover {
+            strong {
+                color: $color-tertiary;
+            }
+            &:after {
+                opacity: 1;
+                transform: translate3d(-50%, -50%, 0);
+            }
+        }
     }
 
     // Flag
@@ -13,21 +45,53 @@
         margin: 0 auto;
         border-radius: 100%;
     }
-    // Link
-    a {
-        text-decoration: none;
-    }
+
+    // Location name
     &__name {
         display: block;
         color: $color-secondary;
-        margin: 20px 0 -2px;
+        margin: 20px 0 8px;
         font-size: rem(48px);
         font-family: $font-serif;
         font-weight: 300;
         line-height: 1.2;
+        transition: color 0.75s var(--ease-quart);
     }
+
+    // Country
     &__country {
         color: $color-tertiary;
     }
 
+    // Badge
+    .badge {
+        position: absolute;
+        left: 50%;
+        bottom: -32px;
+        transform: translateX(-50%);
+    }
+
+    // Photos
+    &__photos {
+        opacity: 0;
+        position: absolute;
+        z-index: 2;
+        top: -10%;
+        left: 50%;
+        width: 240px;
+        height: 160px;
+        background: #444;
+        border-radius: 6px;
+        transform: translate3d(calc(-50% + var(--offset-x)), calc(-50% + var(--offset-y)), 0) rotate(var(--rotate));
+        overflow: hidden;
+        box-shadow: 0 8px 8px rgba(#000, 0.1), 0 16px 28px rgba(#000, 0.12);
+        pointer-events: none;
+        transition: opacity 0.5s var(--ease-quart);
+    }
+
+    &:hover {
+        .location__photos {
+            opacity: 1;
+        }
+    }
 }