From 478d47217b4371332c63738e7406bf6c3e296045 Mon Sep 17 00:00:00 2001
From: Damillora <damillora@damillora.com>
Date: Sun, 11 Jul 2021 03:35:31 +0700
Subject: [PATCH] feat: animate caption

---
 src/sass/ghost.scss | 43 ++++++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/sass/ghost.scss b/src/sass/ghost.scss
index d701434..a944b4c 100644
--- a/src/sass/ghost.scss
+++ b/src/sass/ghost.scss
@@ -18,6 +18,28 @@
     .kg-image {
       width: 100%;
     }
+
+    figcaption {
+      font-size: $text-sm;
+      background: var(--bg-color);
+      color: var(--highlight-color);
+      padding: 0.25rem 1rem;
+      border-radius: 1rem;
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
+      text-align: center;
+      position: absolute;
+      bottom: 2rem;
+      box-shadow: 0px 0px 4px 1px var(--accent-color);
+      @include transition;
+  
+      @include screen(md) {
+        padding: 0.5rem 2rem;
+      }
+    }
+    &:hover figcaption {
+      transform: translateY(150%);
+    }
   }
   .kg-width-wide .kg-image {
     min-width: 100vw;
@@ -35,27 +57,6 @@
   .kg-width-full .kg-image {
     min-width: 100vw;
   }
-  .kg-card figcaption {
-    font-size: $text-sm;
-    background: var(--bg-color);
-    color: var(--highlight-color);
-    padding: 0.25rem 1rem;
-    border-radius: 1rem;
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-    text-align: center;
-
-    @include screen(md) {
-      padding: 0.5rem 2rem;
-    }
-  }
-  .kg-image-card figcaption {
-    position: absolute;
-    bottom: 2rem;
-
-    box-shadow: 0px 0px 4px 1px var(--accent-color);
-  }
-
   .kg-gallery-container {
     min-width: 100vw;
     @include screen(md) {