From 7b09c87ae7971cb9c5c4b7805a3a8002fa74b9f9 Mon Sep 17 00:00:00 2001
From: aleevadh <aleevadh@xpub.nl>
Date: Thu, 14 Mar 2024 23:24:24 +0100
Subject: [PATCH] added animation over "flip-card"

---
 assets/css/stylesheet.css | 47 +++++++++++++++++++++++++++++++++++----
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/assets/css/stylesheet.css b/assets/css/stylesheet.css
index 28d9f5d..46de907 100644
--- a/assets/css/stylesheet.css
+++ b/assets/css/stylesheet.css
@@ -114,20 +114,59 @@ body {
     text-align: right;
 }
 
-.column-right {
+.flip-card {
     width: 30%;
     align-items: center;
     text-align: center;
-    border-radius: 30px;
-    border: 1.7px solid black;
     margin-left: 30px;
 }
 
 .tendrils {
-    width: 100%;
+    padding-top: 15px;
+    width: 100%;   
 }
 
 .info-layer {
     padding-top: 15px;
     padding-bottom: 20px;
+}
+
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 170%;
+  text-align: center;
+  border-radius: 30px;
+  border: 1.7px solid black;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+}
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg);
+}
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.flip-card-front {
+  background-color: #bbb;
+  border-radius: 30px;
+  border: 1.7px solid rgb(46, 46, 46);
+  color: black;
+}
+
+.flip-card-back {
+  background-color: #bbb;
+  color: black;
+  border-radius: 30px;
+  border: 1.7px solid rgb(46, 46, 46);
+  transform: rotateY(180deg);
 }
\ No newline at end of file