draft nr. 1 of new card animtions

1 files changed, 43 insertions, 27 deletions

diff --git a/web/nodecard.css b/web/nodecard.css
index bfc0b74..4103c5e 100644
--- a/web/nodecard.css
+++ b/web/nodecard.css
@@ -35,21 +35,57 @@
 
 .node.card {
     padding: 1em;
+}
+
+.node.card .poster,
+.node.card .poster img {
     height: var(--card-size);
+    transition: height 0.2s;
+}
+.node.card:hover .poster img {
+    height: calc(var(--card-size)+10em);
 }
-.node.card.poster.poster-port {
+.node.card.aspect-port {
     width: calc(var(--card-size) / var(--port-poster-aspect));
 }
-.node.card.poster.poster-land {
+.node.card.aspect-land {
     width: calc(var(--card-size) / var(--land-poster-aspect));
 }
-.node.card.poster.thumb-land {
+.node.card.aspect-thumb {
     width: calc(var(--card-size) / var(--land-thumb-aspect));
 }
-.node.card.poster.poster-square {
+.node.card.aspect-square {
     width: calc(var(--card-size));
 }
 
+.node.card .poster a img {
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+}
+
+.node.card .title {
+    text-align: center;
+}
+
+.node.card .inner {
+    transition: margin 0.2s, padding 0.2s;
+}
+.node.card:hover .inner {
+    background-color: rgba(0, 0, 0, 0.603);
+    backdrop-filter: blur(10px);
+    border-radius: 1em;
+    padding: 1.5em;
+    margin: -5em;
+}
+.node.card:not(:hover) .details {
+    display: none;
+}
+.node.card:hover .title {
+    display: none;
+}
+
+/* 
 .node.card .title {
     margin-top: 0.1em;
     text-align: center;
@@ -60,29 +96,9 @@
 }
 .node.card .poster a {
     grid-area: 1 / 1;
-}
-
-.node.card.poster.poster-port .poster img {
-    width: calc(var(--card-size) / var(--port-poster-aspect));
-    height: var(--card-size);
-}
-.node.card.poster.poster-land .poster img {
-    width: calc(var(--card-size) / var(--land-poster-aspect));
-    height: var(--card-size);
-}
-.node.card.poster.thumb-land .poster img {
-    width: calc(var(--card-size) / var(--land-thumb-aspect));
-    height: var(--card-size);
-}
-.node.card.poster.poster-square .poster img {
-    width: calc(var(--card-size));
-    height: var(--card-size);
-}
-.node.card .poster a img {
-    object-fit: cover;
-    object-position: center;
-}
+} */
 
+/* 
 .node.card.poster .poster .cardhover.open {
     transition: opacity 0.3s, backdrop-filter 0.3s;
     opacity: 0;
@@ -152,4 +168,4 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-}
+} */