From 0dfe6178b9832287e33716e74972a069988a2317 Mon Sep 17 00:00:00 2001
From: Spedon <RealSped0n@outlook.com>
Date: Fri, 10 Mar 2023 17:01:27 +0800
Subject: [PATCH] add fading effect for inactive images

---
 assets/css/_partial/_image.scss | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/assets/css/_partial/_image.scss b/assets/css/_partial/_image.scss
index ec9bd26..e8923c1 100644
--- a/assets/css/_partial/_image.scss
+++ b/assets/css/_partial/_image.scss
@@ -1,14 +1,20 @@
 .image {
-  max-height: 45vmin;
-  width: auto;
+  height: 55vmin;
   position: absolute;
   transform: translate(-50%, -50%);
+  
+  img {
+    height: 55vmin;
+    width: auto;
+  }
 }
 
-.image[data-status="inactive"] {
-  display: none;
+.inactive {
+  opacity: 0;
+  transition: opacity 300ms ease-in-out;
 }
 
-.image[data-status="active"] {
-  display: block;
+.active {
+  opacity: 1;
+  transition: opacity 0ms ease-in-out;
 }
\ No newline at end of file