Add perspective to btn-wrapper.

1 files changed, 22 insertions, 6 deletions

diff --git a/app/static/styles/home.css b/app/static/styles/home.css
index a5dcbec..a0c6606 100644
--- a/app/static/styles/home.css
+++ b/app/static/styles/home.css
@@ -6,7 +6,10 @@
     position: relative;
     background: var(--yes);
 }
-.tab-yes:hover {width: 4%; transition: 0.2s;}
+.tab-yes:hover ~ .feed-post {
+    width: 4%;
+    transition: 0.2s;
+}
 .tab-no {
     height: 100%;
     width: 3%;
@@ -29,28 +32,41 @@
 .post-wrapper {
     position: relative;
     max-height: 25%;
-    max-width: 33%;
+    max-width: 40%;
+    perspective: 600px;
+    perspective-origin: bottom;
 }
 
 .post {
+    position: relative;
     height: 70%;
     background: white;
+    z-index: -1;
     border-radius: 12px;
     padding: 1rem;
     margin: 1rem;
     overflow: hidden;
 }
 .post:hover {overflow: auto;}
-.post:hover + .btn-wrapper {transform: rotateX(0deg);}
+.post:hover + .btn-wrapper {
+    opacity: 100%;
+    animation: btn-wrapper;
+    animation-duration: 1s;
+}
+
+@keyframes btn-wrapper {
+    from{transform: rotateX(-90deg);}
+    to {transform: rotateX(0deg);}
+}
 
 .btn-wrapper {
     position: relative;
     top: -0.6rem;
     z-index: 1;
-    transition: 400ms transform ease-in-out;
-    transform: rotateX(90deg);
+    transform: rotateX(-90deg);
+    /* transition: 400ms transform ease-in-out; */
+    /* animation-fill-mode: forwards; */
 }
-.btn-wrapper:hover {transform: rotateX(0deg);}
 
 .btn-yes {
     height: 25%;