feat: new style for featured categories column

Former-commit-id: 56aeca141c37a63f70c47e354678fccc0d495553

1 files changed, 20 insertions, 7 deletions

diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss
index 7dc411e9..0e3803eb 100644
--- a/assets/css/components/_pages.scss
+++ b/assets/css/components/_pages.scss
@@ -10,13 +10,11 @@
     }
 
     .post-series-item {
-        display: flex;
-        flex-direction: column;
+        position: relative;
         overflow: hidden;
         transition: 0.3s;
         cursor: pointer;
-
-        @include bordered;
+        border-radius: 3px;
 
         .post-series-cover {
             img {
@@ -24,18 +22,33 @@
                 width: 8rem;
             }
         }
+
         .post-series-text {
-            background-color: var(--block-background-color);
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+
+            opacity: 0;
+            transition: opacity 0.3s;
+
             h3 {
-                margin: 0;
+                color: #fff;
+                margin: 0.5rem 0;
                 text-align: center;
+                font-weight: 800;
             }
         }
 
+        &:hover .post-series-text{
+            opacity: 1;
+        }
+
+        box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.2);
         &:hover {
             text-decoration: none;
             box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
-            transform: translateY(-0.5rem);
+            transform: translateY(-0.5rem) scale(1.15) rotate(2deg);
         }
     }
 }